谁能帮我在chart.js上显示2个图形？我在本地读取JSON文件，我想显示2个图形，但不幸的是我只能看到一个图形......这是HTML代码。
<body>
<canvas id="graph1" height="500" width="700" />
<canvas id="graph2" height="300" width="500" />
<!-- <canvas id="graph3" height="500" width="700" /> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.bundle.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
这是JS代码:
<script>
$.getJSON("http://localhost/json_for_graph.json", function (result) {
graph1 = result.dict_for_graph1
graph2 = result.dict_for_graph2
var graph1_unique_id = []
var graph1unknown_list = []
var graph1_relevant_list = []
var graph2_all_times = []
var graph2_id_appear_one_time = []
for (var i = 0; i < graph1.value_for_unique_id_list.dict_X_and_Y_values_for_unique_id_list.length; i++) { graph1_unique_id.push(graph1.value_for_unique_id_list.dict_X_and_Y_values_for_unique_id_list[i]) graph1unknown_list.push(graph1.value_for_all_unknown_list.dict_X_and_Y_values_for_unknown_list[i]) graph1_relevant_list.push(graph1.value_for_all_relevant_list.dict_X_and_Y_values_for_relevant_list[i])
}
for (var i = 0; i < graph2.all_times.length; i++) {
graph2_all_times.push(graph2.all_times)
graph2_id_appear_one_time.push(graph2.id_appear_one_time)
}
var canvas1 = document.getElementById("graph1");
var graphParams1 = {
type: "scatter",
data: {
datasets: [{
label: "Time VS all entities",
data: graph1_unique_id,
borderColor: "red",
backgroundColor: "transparent",
showLine: false
},
{
label: "Time VS unknown entities",
data: graph1unknown_list,
borderColor: "green",
backgroundColor: "transparent",
showLine: false
}, {
label: "Time VS relevant entities",
data: graph1_relevant_list,
borderColor: "blue",
backgroundColor: "transparent",
showLine: false
}],
},
options: {
maintainAspectRatio: false,
responsive: false,
scales: {
xAxes: [{
type: "time",
distribution: "series",
}],
}
}
}
var canvas2 = document.getElementById("graph2");
var graphParams2 = {
type: "scatter",
data: {
datasets: [{
label: "Time VS RSSI of single reception",
data: result.dict_for_graph2.id_appear_one_time,
borderColor: "red",
backgroundColor: "transparent",
showLine: false
},
],
},
options: {
maintainAspectRatio: false,
responsive: false,
scales: {
xAxes: [{
type: "time",
distribution: "series",
}],
}
}
}
ctx1 = new Chart(canvas1, graphParams1);
ctx2 = new Chart(canvas2, graphParams2);
});
</script>
</html>
我只能看到第一个图.而我想看到2个图.谁能帮我一把?谢谢!!!
不像 <img> 元素，该 <canvas> 元素需要一个单独的结束标签 (</canvas>).
试着将你的代码中的画布元素替换成下面的内容。
<canvas id="graph1" height="500" width="700"></canvas>
<canvas id="graph2" height="300" width="500"></canvas>