数据结构

¥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 axes). 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. In case 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 the data is an array of numbers, values from labels array at the same index are used for the index axis (x for vertical, y for horizontal charts).

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 标度提供整数，它使用整数作为内部格式，其中每个整数代表标签数组中的一个索引。null 可用于跳过的值。

¥The values provided must be parsable by the associated scales or in the internal format of the associated scales. A common mistake would be to provide integers for the category scale, which uses integers as an internal format, where each integer represents an index in the labels array. 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'
    }
  }
}

警告

在雷达图中使用对象表示法时，你仍然需要一个带有标签的标签数组，以便图表正确显示。

¥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, property name is used for index scale and value for value scale. For vertical charts, 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'
    }
  }],
};