# 資料結構

資料集的 data 屬性可以使用多種格式傳遞。預設情況下，該 data 會使用相關的圖表類型和比例尺進行解析。

如果使用主 data 屬性的 labels 屬性，則它必須包含與具有最多值的資料集相同數量的元素。這些標籤用於標記索引軸（預設為 x 軸）。標籤的值必須在陣列中提供。提供的標籤可以是字串或數字類型，以便正確渲染。如果您想要多行標籤，可以提供一個陣列，其中每行作為陣列中的一個條目。

# Primitive[]

const cfg = {
  type: 'bar',
  data: {
    datasets: [{
      data: [20, 10],
    }],
    labels: ['a', 'b']
  }
}

當 data 是數字陣列時，索引軸（垂直圖表的 x，水平圖表的 y）會使用 labels 陣列中相同索引的值。

# Object[]

const cfg = {
  type: 'line',
  data: {
    datasets: [{
      data: [{x: 10, y: 20}, {x: 15, y: null}, {x: 20, y: 10}]
    }]
  }
}

const cfg = {
  type: 'line',
  data: {
    datasets: [{
      data: [{x: '2016-12-25', y: 20}, {x: '2016-12-26', y: 10}]
    }]
  }
}

const cfg = {
  type: 'bar',
  data: {
    datasets: [{
      data: [{x: 'Sales', y: 20}, {x: 'Revenue', y: 10}]
    }]
  }
}

這也是用於解析資料的內部格式。在此模式下，可以透過在圖表選項或資料集中指定 parsing: false 來停用解析。如果停用了解析，資料必須經過排序，並且格式必須符合相關的圖表類型和比例尺在內部使用的格式。

提供的值必須可由相關的比例尺解析，或符合相關比例尺的內部格式。一個常見的錯誤是為 category 比例尺提供整數，該比例尺使用整數作為內部格式，其中每個整數代表標籤陣列中的索引。 null 可以用於跳過的值。

# 使用自訂屬性的 Object[]

const cfg = {
  type: 'bar',
  data: {
    datasets: [{
      data: [{id: 'Sales', nested: {value: 1500}}, {id: 'Purchases', nested: {value: 500}}]
    }]
  },
  options: {
    parsing: {
      xAxisKey: 'id',
      yAxisKey: 'nested.value'
    }
  }
}

當使用圓餅圖/甜甜圈圖、雷達圖或極地區域圖表類型時，parsing 物件應具有一個 key 項目，指向要查看的值。在此範例中，甜甜圈圖將顯示兩個項目，值為 1500 和 500。

const cfg = {
  type: 'doughnut',
  data: {
    datasets: [{
      data: [{id: 'Sales', nested: {value: 1500}}, {id: 'Purchases', nested: {value: 500}}]
    }]
  },
  options: {
    parsing: {
      key: 'nested.value'
    }
  }
}

如果鍵包含點，則需要使用雙斜線進行轉義。

const cfg = {
  type: 'line',
  data: {
    datasets: [{
      data: [{'data.key': 'one', 'data.value': 20}, {'data.key': 'two', 'data.value': 30}]
    }]
  },
  options: {
    parsing: {
      xAxisKey: 'data\\.key',
      yAxisKey: 'data\\.value'
    }
  }
}

警告

在雷達圖中使用物件表示法時，您仍然需要一個包含圖表標籤的 labels 陣列才能正確顯示。

# Object

const cfg = {
  type: 'line',
  data: {
    datasets: [{
      data: {
        January: 10,
        February: 20
      }
    }]
  }
}

在此模式下，屬性名稱用於 index 比例尺，而值用於 value 比例尺。對於垂直圖表，索引比例尺為 x，值比例尺為 y。

# 資料集設定

名稱	類型	描述
`label`	`字串`	資料集的標籤，會顯示在圖例和工具提示中。
`clip`	`number`\|`object`	如何相對於 chartArea 裁剪。正值允許溢出，負值會將 chartArea 內裁剪這麼多像素。 0 = 在 chartArea 裁剪。也可以設定每個邊的裁剪：clip: {left: 5, top: false, right: -2, bottom: 0}
`order`	`數字`	資料集的繪製順序。也會影響堆疊、工具提示和圖例的順序。
`stack`	`字串`	此資料集所屬群組的 ID (堆疊時，每個群組將是一個單獨的堆疊)。預設為資料集 `type`。
`parsing`	`boolean`\|`object`	如何解析資料集。可以透過在圖表選項或資料集中指定 parsing: false 來停用解析。如果停用了解析，資料必須經過排序，並且格式必須符合相關的圖表類型和比例尺在內部使用的格式。
`hidden`	`布林值`	設定資料集的可見性。使用 `hidden: true` 將隱藏資料集，使其不會在圖表中呈現。

# 解析

const data = [{x: 'Jan', net: 100, cogs: 50, gm: 50}, {x: 'Feb', net: 120, cogs: 55, gm: 75}];
const cfg = {
  type: 'bar',
  data: {
    labels: ['Jan', 'Feb'],
    datasets: [{
      label: 'Net sales',
      data: data,
      parsing: {
        yAxisKey: 'net'
      }
    }, {
      label: 'Cost of goods sold',
      data: data,
      parsing: {
        yAxisKey: 'cogs'
      }
    }, {
      label: 'Gross margin',
      data: data,
      parsing: {
        yAxisKey: 'gm'
      }
    }]
  },
};

# Typescript

當使用 typescript 時，如果您想使用非預設資料結構的資料結構，您需要在實例化資料變數時將其傳遞給型別介面。

import {ChartData} from 'chart.js';
const datasets: ChartData <'bar', {key: string, value: number} []> = {
  datasets: [{
    data: [{key: 'Sales', value: 20}, {key: 'Revenue', value: 10}],
    parsing: {
      xAxisKey: 'key',
      yAxisKey: 'value'
    }
  }],
};

← 色彩字體 →