Canvasjs 堆积图动态
Canvasjs Stacked Chart Dynamic
我有一些这样的数组 URL:
{
"CABANG B":
[
{
"nama":"Kontrak","jumlah":"30"
},
{
"nama":"Tetap","jumlah":"197"
},
{
"nama":"Honorer","jumlah":"1"
},
{
"nama":"RUPS","jumlah":"3"
}
],
"CABANG A":
[
{
"nama":"Kontrak","jumlah":"22"
},
{
"nama":"Tetap","jumlah":"108"
}
]
}
}
我想创建 Chart Stacked Column
标签 CABANG B
, CABANG A with column
kontra,
tetap,
honorer`
看起来像 this ,我有一些代码:
var dataPointR = [];
$.each(data, function(key, val) {
//key = Cabang A
dataPointR.push({"label": key})
$.each(val, function(key2, val2) {
/// val2.nama = Kontrak
/// val2.jumlah = 30
dataPointR.push({"x": val2.nama ,"y": val2.jumlah})
})
dataPointsR.push({"type":"stackedColumn","name": key ,"dataPoints": dataPointR})
})
但是不起作用,谢谢
这样你就可以根据给定的link制作你的数据了
<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<script>
var obj = {
"CABANG B":
[
{
"nama": "Kontrak", "jumlah": "30"
},
{
"nama": "Tetap", "jumlah": "197"
},
{
"nama": "Honorer", "jumlah": "1"
},
{
"nama": "RUPS", "jumlah": "3"
}
],
"CABANG A":
[
{
"nama": "Kontrak", "jumlah": "22"
},
{
"nama": "Tetap", "jumlah": "108"
}
]
};
var finalData = [];
$.each(obj, function (key, val) {
var data = {};
var dataPointR = [];
data["name"] = key;
data["type"] = "stackedColumn";
$.each(val, function (key2, val2) {
dataPointR.push({ "x": val2.nama, "y": val2.jumlah })
});
data["dataPoints"] = dataPointR;
finalData.push(data);
})
console.log(finalData);
</script>
</body>
</html>
看看这个,你的数据是这样显示的:
<!DOCTYPE HTML>
<html>
<head>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script>
var obj = {
"Kontrak": [
{
"nama": "CABANG B", "jumlah": "30"
},
{
"nama": "CABANG A", "jumlah": "22"
}
],
"Tetap": [
{
"nama": "CABANG B", "jumlah": "197"
},
{
"nama": "CABANG A", "jumlah": "108"
}
],
"Honorer": [
{
"nama": "CABANG B", "jumlah": "1"
}
],
"RUPS": [
{
"nama": "CABANG B", "jumlah": "3"
}
],
}
var finalData = [];
var colors = ["#B6B1A8", "#696661", "#EDCA93", "#695A42"];
var counter = 0;
$.each(obj, function (key, val) {
var dataPointR = [];
var data = {};
data["type"] = "stackedColumn";
data["showInLegend"] = true;
data["name"] = key;
data["color"] = colors[counter++];
$.each(val, function (key2, val2) {
dataPointR.push({ "y": parseInt(val2.jumlah), "label": val2.nama })
});
data["dataPoints"] = dataPointR;
finalData.push(data);
});
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title: {
text: "Google - Consolidated Quarterly Revenue",
fontFamily: "arial black",
fontColor: "#695A42"
},
toolTip: {
shared: true,
},
data: finalData
});
chart.render();
</script>
</body>
</html>
解决我尝试像这样更改我的数组
var obj = {
"KONTRAK":
[
{
"nama": "CABANG A", "jumlah": "30"
},
{
"nama": "CABANG B", "jumlah": "10"
},
{
"nama": "CABANG C", "jumlah": "11"
}
],
"TETAP":
[
{
"nama": "CABANG A", "jumlah": "22"
},
{
"nama": "CABANG B", "jumlah": "2"
},
{
"nama": "CABANG C", "jumlah": "11"
}
]
};
我有一些这样的数组 URL:
{
"CABANG B":
[
{
"nama":"Kontrak","jumlah":"30"
},
{
"nama":"Tetap","jumlah":"197"
},
{
"nama":"Honorer","jumlah":"1"
},
{
"nama":"RUPS","jumlah":"3"
}
],
"CABANG A":
[
{
"nama":"Kontrak","jumlah":"22"
},
{
"nama":"Tetap","jumlah":"108"
}
]
}
}
我想创建 Chart Stacked Column
标签 CABANG B
, CABANG A with column
kontra,
tetap,
honorer`
看起来像 this ,我有一些代码:
var dataPointR = [];
$.each(data, function(key, val) {
//key = Cabang A
dataPointR.push({"label": key})
$.each(val, function(key2, val2) {
/// val2.nama = Kontrak
/// val2.jumlah = 30
dataPointR.push({"x": val2.nama ,"y": val2.jumlah})
})
dataPointsR.push({"type":"stackedColumn","name": key ,"dataPoints": dataPointR})
})
但是不起作用,谢谢
这样你就可以根据给定的link制作你的数据了
<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<script>
var obj = {
"CABANG B":
[
{
"nama": "Kontrak", "jumlah": "30"
},
{
"nama": "Tetap", "jumlah": "197"
},
{
"nama": "Honorer", "jumlah": "1"
},
{
"nama": "RUPS", "jumlah": "3"
}
],
"CABANG A":
[
{
"nama": "Kontrak", "jumlah": "22"
},
{
"nama": "Tetap", "jumlah": "108"
}
]
};
var finalData = [];
$.each(obj, function (key, val) {
var data = {};
var dataPointR = [];
data["name"] = key;
data["type"] = "stackedColumn";
$.each(val, function (key2, val2) {
dataPointR.push({ "x": val2.nama, "y": val2.jumlah })
});
data["dataPoints"] = dataPointR;
finalData.push(data);
})
console.log(finalData);
</script>
</body>
</html>
看看这个,你的数据是这样显示的:
<!DOCTYPE HTML>
<html>
<head>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script>
var obj = {
"Kontrak": [
{
"nama": "CABANG B", "jumlah": "30"
},
{
"nama": "CABANG A", "jumlah": "22"
}
],
"Tetap": [
{
"nama": "CABANG B", "jumlah": "197"
},
{
"nama": "CABANG A", "jumlah": "108"
}
],
"Honorer": [
{
"nama": "CABANG B", "jumlah": "1"
}
],
"RUPS": [
{
"nama": "CABANG B", "jumlah": "3"
}
],
}
var finalData = [];
var colors = ["#B6B1A8", "#696661", "#EDCA93", "#695A42"];
var counter = 0;
$.each(obj, function (key, val) {
var dataPointR = [];
var data = {};
data["type"] = "stackedColumn";
data["showInLegend"] = true;
data["name"] = key;
data["color"] = colors[counter++];
$.each(val, function (key2, val2) {
dataPointR.push({ "y": parseInt(val2.jumlah), "label": val2.nama })
});
data["dataPoints"] = dataPointR;
finalData.push(data);
});
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
title: {
text: "Google - Consolidated Quarterly Revenue",
fontFamily: "arial black",
fontColor: "#695A42"
},
toolTip: {
shared: true,
},
data: finalData
});
chart.render();
</script>
</body>
</html>
解决我尝试像这样更改我的数组
var obj = {
"KONTRAK":
[
{
"nama": "CABANG A", "jumlah": "30"
},
{
"nama": "CABANG B", "jumlah": "10"
},
{
"nama": "CABANG C", "jumlah": "11"
}
],
"TETAP":
[
{
"nama": "CABANG A", "jumlah": "22"
},
{
"nama": "CABANG B", "jumlah": "2"
},
{
"nama": "CABANG C", "jumlah": "11"
}
]
};