用JavaScript创建带有系列的堆积柱形图

Question

我正在尝试创建一个包含两个类别“ Kosten ”和“ Stromertrag ”的堆积柱形图。每个类别都有自己的具有不同值的列。以下是我要实现的附件。

我尝试实现4-5个图表库，例如canvasjs，highchart等。但是他们想要数据数组。但就我而言，我要在json下方创建相同的内容。

{
   substratkosten: "9,000"
   kosten1: "156,600"
   kosten2: "298,286"
   kosten3: "64,800"
   strom2: "583,200"
   substrat: "108,000"
}

其中前四个值用于“ Kosten ”类别，后两个值用于“ Stromertrag ”类别。我还尝试过更改图表列的颜色，但是我没有找到任何可实现相同目的的属性。

任何人都可以帮助实现相同目标吗？ 预先感谢。

Answer 1

您可以解析format accepted by CanvasJS中的数据并呈现图表。下面是工作代码。

var jsonData = {
  substratkosten: "9,000",
  kosten1: "156,600",
  kosten2: "298,286",
  kosten3: "64,800",
  strom2: "583,200",
  substrat: "108,000"
};

var data = [];

for (var key in jsonData) {
  if(key.includes("kosten")){
    data.push({type: "stackedColumn", indexLabel: "{y}", dataPoints: [{x: 1, label: "Kosten", y: parseFloat(jsonData[key].replace(/,/g, ''))}]});
  }
  else {
    data.push({type: "stackedColumn", indexLabel: "{y}", dataPoints: [{x: 2, label: "Stromertrag", y: parseFloat(jsonData[key].replace(/,/g, ''))}]})
  }
}

var chart = new CanvasJS.Chart("chartContainer", {
  title:{
    text: "StackedColumn Chart"
  },
  data: data
});

chart.render();

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>