时间戳

首页 > 解决方案 > 无法在 chart.js 上显示 2 个图形

javascript - 无法在 chart.js 上显示 2 个图形

问题描述

有人可以帮我在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>

我只能看到第一张图表。我想看看这两张图表。有人可以帮帮我吗？谢谢你！！

标签： javascriptchart.js

解决方案

与<img>元素不同，<canvas>元素需要单独的结束标签(</canvas>).

尝试用下面的代码替换代码中的画布元素。

<canvas id="graph1" height="500" width="700"></canvas>
<canvas id="graph2" height="300" width="500"></canvas>

推荐阅读