Chart.js 数据结构

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

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

Primitive[]

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

当数据是数字数组时，同一索引处的标签数组中的值用于索引轴（x 表示垂直，y 表示水平图表）。

Object[]

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

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

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

这也是用于解析数据的内部格式。 在这种模式下，可以通过在图表选项或数据集中指定 parsing: false 来禁用解析。 如果禁用解析，则必须对数据进行排序，并以相关图表类型和刻度在内部使用的格式进行排序。

提供的值必须可由相关比例或以相关比例的内部格式解析。 一个常见的错误是为 category 标度提供整数，它使用整数作为内部格式，其中每个整数代表标签数组中的一个索引。 null 可用于跳过的值。

Object[] 使用自定义属性

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

当使用饼图/圆环图类型时， parsing 对象应该有一个关键项，指向要查看的值。 在此示例中，圆环图将显示两个值为 1500 和 500 的项目。

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

Object

type: 'pie',
data: {
    datasets: [{
      data: {
          January: 10,
          February: 20
      }
    }]
}

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

数据集配置

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