Chart.js更新到X轴未更新 [英] Chart.js Update to X Axis Not Updating

问题描述

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

I have been trying to get my charts x axis to update without having to refresh the page or clear the canvas. Below is my js for the function that updates the values for the labels and then is supposed to update the chart. I have also tried ctx.update();

Chart.js V2.8

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();
}

编辑 日期是我的数组，用于存储 data.labels 和 ctx 的值。 / p>

EDIT dates is my array that stores the values for data.labels and ctx is my chart.

推荐答案

您必须在变量中实例化图表并更新变量。您可以在我的 jsbin 中看到它。

You have to instance the chart in a variable and update the variable. You can see it in my 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()
}

这篇关于Chart.js更新到X轴未更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！