Question

我正在尝试在d3中创建一个图表，使其显示为：https://ibb.co/j13i5T

数据格式如下，无法更改：

  var data = [
  {
  "year": "1991",
  "color":"purple",
  "value":12,
  },
  {
  "year":"1991",
  "color":"red",
  "value":8,
  },
  {
  "year": "1992",
  "color":"red",
  "value":20,
  },
  {
  "year": "1993",
  "color":"blue",
  "value":9,
  },
  {
  "year": "1993",
  "color":"red",
  "value":7,
  },
  {
  "year": "1993",
  "color":"purple",
  "value":3,
  },
]

我已经能够将每个对象放置在相应的年份，但是我正在努力将它们堆叠起来。

这是代码，但是尽管它在本地计算机上显示，但我并没有使它起作用：https://jsfiddle.net/joat1/kug91hm0/34/

如果还有一种更好的方法可以解决所有问题，那么绝对可以接受建议。

Answer 1

如上所述，我的首选解决方案是将ChartJS用于此类项目。我继续进行了一次快速的尝试，使用（相对）简单的数据转换来重新创建示例图表，以将输入的数据映射为ChartJS可以读取的格式。

此处的代码笔在https://codepen.io/jsanderlin/pen/dKqEod

我将在下面查看对ChartJS执行数据映射/预处理的代码，因为这是此过程中涉及的JavaScript中最复杂的部分。其余的JS / HTML只是从ChartJS文档和Stacked Chart示例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;
});

有趣的项目将在今天下午开始工作；）

当每个单独的片段都是一个对象时，如何在d3中创建堆叠的条形图？

1 个答案: