如何在Chart.js中动态生成数量可变的数据集？

Chart.js的data.datasets字段要求直接传入数组类型的数据，不像ticks这类配置项支持函数动态返回值——这就是你直接给datasets赋值函数导致失效的原因。

要实现动态生成可变数量的数据集，你可以提前用函数生成数据集数组，再把结果赋值给datasets，具体步骤如下：

1. 定义数据源列表 #

先把所有需要展示的数据集元数据（比如标签、数值）整理成一个数组，数量可按需调整：

// 示例：3组数据源，可根据实际需求增减
const dataSources = [
  { label: '# of Votes', values: [12, 19, 3, 5, 2, 3] },
  { label: '# of Points', values: [7, 11, 5, 8, 3, 7] },
  { label: '# of Comments', values: [5, 8, 2, 9, 4, 6] }
];

2. 编写生成数据集的函数 #

遍历数据源列表，把每个元数据转换成Chart.js要求的数据集对象格式：

const generateDatasets = () => {
  return dataSources.map(source => {
    return {
      label: source.label,
      data: source.values,
      borderWidth: 1,
      // 可按需添加更多样式配置，比如borderColor、backgroundColor等
    };
  });
};

3. 初始化图表时调用函数赋值 #

在图表配置中，直接调用函数返回的数组赋值给datasets：

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: generateDatasets() // 传入生成好的数据集数组
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          reverse: false
        }
      }]
    }
  }
};

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

动态更新数据集（可选） #

如果需要在图表渲染后新增/删除数据集，只需更新数据源列表，再重新赋值并调用update()方法：

// 假设已初始化chart实例
const chart = new Chart(ctx, options);

// 新增一组数据
dataSources.push({ label: '# of Shares', values: [3, 6, 1, 7, 2, 5] });
// 更新数据集并刷新图表
chart.data.datasets = generateDatasets();
chart.update();

内容的提问来源于stack exchange，提问作者Muhammad Waqar Anwar