当每个单独的段都是一个对象时,如何在d3中创建堆积条形图?

如上所述,我的首选解决方案是 ChartJS 对于这类项目。我继续做了一个简单的数据转换,将输入的数据映射成chartjs可以读取的格式,然后快速地尝试重新创建示例图表。

密码笔在这里 https://codepen.io/jsanderlin/pen/dKqEod

我将看看下面为chartjs执行数据映射/预处理的代码,因为这是这个过程中最复杂的javascript代码。剩下的js/html只是从chartjs文档和堆叠的图表示例中提取出来的 here 是的。

data.forEach((val) => {
  // Add the label if it doesn't exist already
  if(!barChartData.labels.includes(val.year)) {
    barChartData.labels.push(val.year);
  }

  // Search for the correct dataset
  let valsDataset;
  let datasetName = `Dataset ${val.color}`;
  barChartData.datasets.forEach((dataset) => {
    if(dataset.label === datasetName) valsDataset = dataset;
  });

  // Add the dataset if it doesn't exist already
  if(valsDataset === undefined) {
    valsDataset = {
      label: datasetName,
      backgroundColor: val.color,
      data: []
    }
    barChartData.datasets.push(valsDataset);
  }

  // Find the correct index of the data array for this value, by looking up the year
  let valIndex = barChartData.labels.indexOf(val.year);
  // Set the correct data attribute according to val.value
  valsDataset.data[valIndex] = val.value;
});

今天下午要做的有趣的项目;)