Question

我在页面启动时使用带有硬编码数据的Chart.js加载图表。按下按钮后，我正在进行ajax查询;从数据库获取外部数据，并希望将该数据加载到图表中。

我检索到正确的数据并存储为数组。我想清除当前的图表数据并输入这个新数组作为图表的新数据。

对于初学者，我需要清空旧数据并尝试清除（）和destroy（），但它们都不起作用。图表只是继续使用旧数据重新加载。旧图表似乎暂时删除，只是看到它再次出现。我该如何解决这个问题？

 $( document ).ready(function() {

        var lineData = {
            labels: ["Lap 1", "Lap 2", "Lap 3", "Lap 4", "Lap 5"],
            datasets: [{
                fillColor: "rgba(255,255,255,0)",
                strokeColor: "rgba(63,169,245,1)",
                pointColor: "rgba(63,169,245,1)",
                pointStrokeColor: "#fff",
                data: [10, 20, 30, 40, 55] // need to swap this with race1Data array
            }, {
                fillColor: "rgba(255,255,255,0)",
                strokeColor: "rgba(102,45,145,1)",
                pointColor: "rgba(102,45,145,1)",
                pointStrokeColor: "#fff",
                data: [97, 87, 55, 72, 66]
            }]
        }

        var lineOptions = {
            responsive: true,
            animation: true,
            pointDot: true,
            scaleOverride : false,
            scaleShowGridLines : false,
            scaleShowLabels : true,
            scaleSteps : 4,
            scaleStepWidth : 25,
            scaleStartValue : null
        };

        //Create Line chart
        var ctx = document.getElementById("lineChart").getContext("2d");
        myNewChart = new Chart(ctx).Line(lineData, lineOptions);

        $("#form").submit(function(e) {
        var race1 = $( "#racename1" ).val();
        var race2 = $( "#racename2" ).val();
        var race1Data = [];
            $.post("MyServlet", {raceName1 : race1, raceName2 : race2},  function(responseText) {
                race1Data = responseText; // <-- correct data
                myNewChart.destroy(); // <--doesn't work
            });
        });

    });

Answer 1

我没有找到任何更好的解决方案，但是要遍历lineData并通过调用removeData()删除所有数据

以下是为所提供的代码创建的示例： https://jsfiddle.net/4e3u5L89/2/

在ajax调用时Cleart Chart数据

1 个答案: