我正在尝试将一个json文件(静态文件)加载到chartjs。但是它没有给任何结果。我正在使用python生成json文件。 我是jquery和javascript的新手。
这是我的代码。
<!doctype html>
<html>
<head>
<title>Bar Chart</title>
<script type="text/javascript" language="javascript" src="static/js/chart-min.js"></script>
<script type="text/javascript" language="javascript" src="static/js/util.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<script>
<div id="container" style="width: 75%;">
<canvas id="canvas"></canvas>
</div>
$.getJSON( "var/graph.json", function( data ) {
var myChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
</body>
</html>
我的静态json文件看起来像这样
{
"test_data": [
["aa", "11"],
["bb", "123"],
["cc", "81"],
["dd", "12"],
["ee", "22"]
]
}
我在这里缺少的东西...我需要绘制一个折线图(x轴-名称(aa,bb,cc,dd)y轴编号(11,123,81,22) 感谢您的帮助。
答案 0 :(得分:2)
$.getJSON("var/graph.json", function(data) {
var labels = data.test_data.map(function(e) {
return e[0];
});
var data = data.test_data.map(function(e) {
return e[1];
});
var ctx = document.getElementById('canvas').getContext('2d');
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [{
backgroundColor: 'rgb(129, 198, 2228)',
borderColor: 'rgb(0, 150, 215)',
data: data
}]
},
options: {
responsive: 'true',
}
});
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<canvas id="canvas" height="80"></canvas>
答案 1 :(得分:1)
您需要将data
转换为适合linear chart axis的格式。对于折线图,您需要定义数据集的labels
和data
。可以使用Array.map()
方法来完成。
data: {
labels: data.test_data.map(a => a[0]),
datasets: [{
data: data.test_data.map(a => a[1]),
...
}]
},
请在下面查看您的修改后的代码。
const data = {
"test_data": [
["aa", "11"],
["bb", "123"],
["cc", "81"],
["dd", "12"],
["ee", "22"]
]
};
new Chart('canvas', {
type: 'line',
data: {
labels: data.test_data.map(a => a[0]),
datasets: [{
label: 'My Dataset',
data: data.test_data.map(a => a[1]),
fill: false,
borderColor: 'red'
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<canvas id="canvas" height="80"></canvas>