我在页面启动时使用带有硬编码数据的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
});
});
});
答案 0 :(得分:1)
我没有找到任何更好的解决方案,但是要遍历lineData
并通过调用removeData()
删除所有数据
以下是为所提供的代码创建的示例: https://jsfiddle.net/4e3u5L89/2/