# 数据结构

数据集的 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 刻度提供整数，它使用整数作为内部格式，其中每个整数表示 labels 数组中的索引。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`	`string`	数据集的标签，它显示在图例和工具提示中。
`clip`	`number`\|`object`	相对于图表区域如何裁剪。正值允许溢出，负值在图表区域内裁剪这么多像素。0 = 在图表区域处裁剪。也可以针对每边配置裁剪：clip: {left: 5, top: false, right: -2, bottom: 0}
`order`	`number`	数据集的绘制顺序。也影响堆叠、工具提示和图例的顺序。
`stack`	`string`	此数据集所属组的 ID（当堆叠时，每个组将是一个独立的堆叠）。默认值为数据集 `type`。
`parsing`	`boolean`\|`object`	如何解析数据集。可以通过在图表选项或数据集上指定 `parsing: 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 时，如果要使用与默认数据结构不同的数据结构，则需要在实例化数据变量时将其传递给类型接口。

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

← 颜色字体 →