chart.js加载全新的数据

Question

APIchart.js允许用户编辑加载到其中的数据集的点,例如:

.update( )

在Chart实例上调用update()将使用任何更新的值重新渲染图表,允许您编辑多个现有点的值,然后在一个动画渲染循环中渲染它们.

.addData( valuesArray, label )

在Chart实例上调用addData(valuesArray,label),为每个数据集传递一个值数组,以及这些点的标签.

.removeData( )

在Chart实例上调用removeData()将删除图表上所有数据集的第一个值.

所有这些都很棒,但我无法弄清楚如何加载一个全新的数据集,消除旧的数据集.文档似乎没有涵盖这一点.

Answer 1

我有很大的问题

首先我尝试.clear()然后我尝试了.destroy(),我尝试将我的图表引用设置为null

什么最终解决了我的问题:删除<canvas>元素,然后重新出现一个新<canvas>的父容器

有一百万种方法可以做到这一点:

var resetCanvas = function () {
  $('#results-graph').remove(); // this is my <canvas> element
  $('#graph-container').append('<canvas id="results-graph"><canvas>');
  canvas = document.querySelector('#results-graph'); // why use jQuery?
  ctx = canvas.getContext('2d');
  ctx.canvas.width = $('#graph').width(); // resize to parent width
  ctx.canvas.height = $('#graph').height(); // resize to parent height

  var x = canvas.width/2;
  var y = canvas.height/2;
  ctx.font = '10pt Verdana';
  ctx.textAlign = 'center';
  ctx.fillText('This text is centered on the canvas', x, y);
};

Answer 2

你需要销毁:

myLineChart.destroy();

然后重新初始化图表:

var ctx = document.getElementById("myChartLine").getContext("2d");
myLineChart = new Chart(ctx).Line(data, options);

Answer 3

使用Chart.js V2.0,您可以执行以下操作:

websiteChart.config.data = some_new_data;
websiteChart.update();

Answer 4

这是一个旧的线程,但在当前版本(从1-feb-2017开始),很容易替换在chart.js上绘制的数据集:

假设您的新x轴值在数组x中,而y轴值在数组y中,您可以使用下面的代码来更新图表.

var x = [1,2,3];
var y = [1,1,1];

chart.data.datasets[0].data = y;
chart.data.labels = x;

chart.update();

Answer 5

ChartJS 2.6支持数据引用替换(请参阅update(config)文档中的注释).所以,当你有你的图表时,你基本上可以这样做:

myChart.data.labels = ['1am', '2am', '3am', '4am'];
myChart.data.datasets[0].data = [0, 12, 35, 36];
myChart.update();

它不会通过添加点来获得动画,但图形上的现有点将会动画化.

Answer 6

我对此的解决方案非常简单.(版本1.X)

getDataSet:function(valuesArr1,valuesArr2){
        var dataset = [];
        var arr1 = {
            label: " (myvalues1)",
            fillColor: "rgba(0, 138, 212,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(0, 138, 212,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: valuesArr1
        };
        var arr2 = {
            label: " (myvalues2)",
            fillColor: "rgba(255, 174, 087,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(255, 174, 087,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: valuesArr2
        };
        /*Example conditions*/
        if(condition 1)
          dataset.push(arr1);
        }
        if(condition 2){
          dataset.push(arr1);
          dataset.push(arr2);
        }

        return dataset;
    }

var data = {
    labels: mylabelone,
    datasets: getDataSet()
};
if(myBarChart != null) // i initialize myBarChart var with null
    myBarChart.destroy(); // if not null call destroy
    myBarChart = new Chart(ctxmini).Bar(data, options);//render it again ...

没有闪烁或问题.getDataSet是一个控制我需要呈现的数据集的函数

Answer 7

我在这里回答了这个问题,请参阅如何从画布中清除图表,以便无法触发悬停事件？

但这是解决方案:

var myPieChart=null;

function drawChart(objChart,data){
    if(myPieChart!=null){
        myPieChart.destroy();
    }
    // Get the context of the canvas element we want to select
    var ctx = objChart.getContext("2d");
    myPieChart = new Chart(ctx).Pie(data, {animateScale: true});
}

Answer 8

根据文档,clear()清除画布.可以把它想象成Paint中的橡皮擦工具.它与图表实例中当前加载的数据无关.

销毁实例并创建新实例是浪费.相反,使用API​​方法removeData()和addData().这些将向图表实例添加/删除单个段.因此,如果要加载全新数据,只需循环图表数据数组,然后调用removeData(index)(数组索引应对应于当前段索引).然后,用addData(index)它来填充新数据.我建议包装两种方法来循环数据,因为他们期望单个段索引.我用resetChart和updateChart.在继续之前,请务必查看Chart.js最新版本和文档.他们可能已经添加了完全替换数据的新方法.

Answer 9

上述答案都没有以非常干净的方式和最少的代码帮助我的特殊情况。我需要删除所有数据集，然后循环动态添加多个数据集。所以这个截图是为那些一直到页面底部却找不到答案的人准备的:)

注意：将所有新数据加载到数据集对象后，请确保调用 Chart.update()。希望这对某人有帮助

function removeData(chart) {
   chart.data.datasets.length = 0;
}

function addData(chart, data) {
  chart.data.datasets.push(data);
}

Answer 10

没有必要破坏图表。尝试用这个

function removeData(chart) {

        let total = chart.data.labels.length;

        while (total >= 0) {
            chart.data.labels.pop();
            chart.data.datasets[0].data.pop();
            total--;
        }

        chart.update();
    }