我正在尝试将一个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）感谢您的帮助。
您需要将data转换为适合linear chart axis的格式。对于折线图，您需要定义数据集的labels和data。可以使用Array.map()方法完成。
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
}
}]
}
}
});