清除Ajax调用时的图表数据[重复]

Question

我正在使用图表加载图表。在页面启动时使用硬编码数据的js。接下来，单击一个按钮，我进行一个ajax查询；从数据库获取外部数据，并希望将该数据加载到图表中。

我已检索到正确的数据并将其存储为数组。我想清除当前图表数据，并将此新数组作为图表的新数据输入。

首先，我需要清空旧数据，并尝试、清除（）和销毁（），但它们都不起作用。图表只是不断地用旧数据重新加载。旧图表似乎被删除了一瞬间，却又出现了。我该如何解决这个问题？

 $( 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

我没有找到更好的解决方案，只能通过调用removeData（）

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