数据结构

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

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

Primitive[]

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

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

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'
    }
  }
}

当使用饼图/圆环图、雷达或 polarArea 图表类型时，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'
    }
  }
}

警告

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

目的

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

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

数据集配置

名称	类型	描述
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 将隐藏数据集，使其不在图表中渲染。

解析

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