Chart.js 更新 X 轴不更新

Question

我一直在尝试更新图表的横轴值，而不必刷新页面或清除画布。以下是我的JS函数，用于更新标签的值，然后更新图表。我也尝试过ctx.update();

Chart.js V2.8

function dateRange(){
    var date1 = document.getElementById('date1').value;
    var date2 = document.getElementById('date2').value;
    date1 = date1.replace(/-/g,"");
    date2 = date2.replace(/-/g,"");
    raw_dates = raw_dates.filter(function(x){
        return x > date1 && x < date2;
    });
    dates = raw_dates;
    ctx.data.labels.update();
}

编辑 dates 是存储data.labels的值的数组，ctx是我的图表。

- FamousAv8er

Answer 1

我建议禁用图表动画，并在变量中实例化图表和画布，然后尝试销毁图表并使画布未定义（以释放内存），然后创建一个新的图表。

- user11897373

---

在以往尝试清除画布或初始化空白画布时，出现了旧图表在我悬停在携带旧数据点的位置后重新出现的问题。 - FamousAv8er

这是一个链接，其中包含我尝试解决此问题时遇到的初始问题 https://stackoverflow.com/questions/57962123/canvas-emptied-but-reappears - FamousAv8er

图表和画布在全局变量作用域内吗？ - user11897373

Answer 2

var chart_holder, canvas_holder = null;

function drawChart(){
    try{
      chart_holder.destroy()
      canvas_holder = undefined;
    }catch(e){}

    canvas_holder = document.createElement("canvas");
    $('#divelement').empty().append(canvas_holder);

    chart_holder = new Chart(canvas_holder, {
        type: 'bar',
        data: data,
        options: {...}
    })
}

- user11897373

Answer 3

你需要将图表实例化到一个变量中并更新该变量。你可以在我的jsbin中看到。

你可以在文档中找到更多关于更新图表的信息。

重要部分：

let chart = new Chart(document.getElementById("chart"), { // can be any variable name
  type: 'line',
  data: data,  
  options: options
});

function addDataButton(){
  addData()
  chart.update() // chartInstance.update()
}

- HeadhunterKev