数据结构

¥Data structures

数据集的 data 属性可以多种格式传递。默认情况下，data 使用关联的图表类型和比例进行解析。

¥The data property of a dataset can be passed in various formats. By default, that data is parsed using the associated chart type and scales.

如果使用主 data 属性的 labels 属性，它必须包含与具有最多值的数据集相同数量的元素。这些标签用于标记索引轴（默认为 x 轴）。标签的值必须在数组中提供。提供的标签可以是要正确渲染的字符串或数字类型。如果需要多行标签，可以提供一个数组，每行都作为数组中的一个条目。

¥If the labels property of the main data property is used, it has to contain the same amount of elements as the dataset with the most values. These labels are used to label the index axis (default x axis). The values for the labels have to be provided in an array. The provided labels can be of the type string or number to be rendered correctly. If you want multiline labels, you can provide an array with each line as one entry in the array.

Primitive[]

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

当 data 是数字数组时，索引轴将使用 labels 数组中相同索引处的值（x 表示垂直图表，y 表示水平图表）。

¥When data is an array of numbers, values from the labels array at the same index are used for the index axis (x for vertical, y for horizontal charts).

Array[]

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

当 data 是数组数组（或 TypeScript 中称为元组）时，每个元组的第一个元素是索引（x 表示垂直图表，y 表示水平图表），第二个元素是值（默认为 y）。

¥When data is an array of arrays (or what TypeScript would call tuples), the first element of each tuple is the index (x for vertical, y for horizontal charts) and the second element is the value (y by default).

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 来禁用解析。如果禁用解析，则必须对数据进行排序，并采用相关图表类型和比例在内部使用的格式。

¥This is also the internal format used for parsed data. In this mode, parsing can be disabled by specifying parsing: false at chart options or dataset. If parsing is disabled, data must be sorted and in the formats the associated chart type and scales use internally.

提供的值必须可以由关联的尺度或关联尺度的内部格式解析。例如，category 刻度使用整数作为内部格式，每个整数代表标签数组中的一个索引；但是，如果启用了解析功能，它也可以解析字符串标签。

¥The values provided must be parsable by the associated scales or in the internal format of the associated scales. For example, the category scale uses integers as an internal format, where each integer represents an index in the labels array; but, if parsing is enabled, it can also parse string labels.

null 可用于跳过的值。

¥null can be used for skipped values.

Object[] 使用自定义属性

¥Object[] using custom properties

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

当使用饼图/圆环图、雷达或 polarArea 图表类型时，parsing 对象应该有一个指向要查看的值的 key 项。在此示例中，圆环图将显示两个值分别为 1500 和 500 的项目。

¥When using the pie/doughnut, radar or polarArea chart type, the parsing object should have a key item that points to the value to look at. In this example, the doughnut chart will show two items with values 1500 and 500.

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

如果键中包含点，则需要使用双斜杠进行转义：

¥If the key contains a dot, it needs to be escaped with a double slash:

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 数组才能正确显示图表。

¥When using object notation in a radar chart, you still need a labels array with labels for the chart to show correctly.

目的

¥Object

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

在此模式下，index 刻度使用属性名称，value 刻度使用属性值。对于垂直图表，索引刻度为 x，值刻度为 y。

¥In this mode, the property name is used for the index scale and value for the value scale. For vertical charts, the index scale is x and value scale is y.

数据集配置

¥Dataset Configuration

名称	类型	描述
label	string	出现在图例和工具提示中的数据集标签。
clip	number|object	如何相对于 chartArea 进行裁剪。正值允许溢出，负值会限制 chartArea 内的许多像素。0 = 在图表区域剪辑。裁剪也可以每边配置：clip:{left: 5, top: false, right: -2, bottom: 0}
order	number	数据集的绘制顺序。还会影响堆叠、工具提示和图例的顺序。
stack	string	此数据集所属组的 ID（堆叠时，每个组将是一个单独的堆栈）。默认为数据集 type。
parsing	boolean|object	如何解析数据集。可以通过指定解析来禁用解析：在图表选项或数据集处为 false。如果禁用解析，则必须对数据进行排序，并采用相关图表类型和比例在内部使用的格式。
hidden	boolean	配置数据集的可见性。使用 hidden: true 将隐藏数据集，使其不在图表中渲染。

解析

¥parsing

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 时，如果要使用非默认数据结构，则需要在实例化数据变量时将其传递给类型接口。

¥When using TypeScript, if you want to use a data structure that is not the default data structure, you will need to pass it to the type interface when instantiating the data variable.

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'
    }
  }],
};