我正在尝试创建一个包含两个类别“ 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 ”类别。我还尝试过更改图表列的颜色,但是我没有找到任何可实现相同目的的属性。
任何人都可以帮助实现相同目标吗? 预先感谢。
答案 0 :(得分:0)
您可以解析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>