Chart.js加载新数据

我想加载新数据（隐藏特定图），我试过destroy()函数like here但它不工作，我不知道我在想什么。Chart.js加载新数据

我想加载一个数据（两个），但我想选择哪一个可见。

HTML

<canvas id="linechart"></canvas> 
<div> 
    <a id="current">Current</a> 
    <a id="forecast">Forecast</a> 
</div>

的JavaScript

$(document).ready(function(){ 
    var canvas = document.getElementById('linechart'); 
    var ctx = canvas.getContext('2d'); 
    var current = [800, 1350, 1400, 1600, 2600, 3100]; 
    var forecast = [400, 1050, 1200, 1300, 1800, 2400]; 
    var data = { 
     labels: ["2", "4", "8", "12", "16", "20"], 
     pointDotRadius: 0, 
     pointRadius: 0, 
     pointBorderWidth : 0, 
     pointHitRadius: 0, 
     datasets: [ 
     { 
     label: "current", 
     fillColor: "rgba(220,220,220,0)", 
     strokeColor: "#7bc775", 
     pointColor: "#7bc775", 
     data: current, 
     }, 
     { 
     label: "forecast", 
     fillColor: "rgba(151,187,205,0)", 
     strokeColor: "#fed477", 
     pointColor: "#fed477", 
     data: forecast, 
     }] 
    }; 
    var myLineChart = new Chart(ctx, { 
     type: 'line', 
     data: data 
    }); 
    var step = 800; 
    var max = 3200; 
    var start = 0; 
    window.myObjBar = new Chart(ctx).Line(data, { 
     scaleOverride: true, 
     scaleSteps: Math.ceil((max-start)/step), 
     scaleStepWidth: step, 
     scaleStartValue: start, 
     responsive : true 
    }); 
    $('#current').click(function(){ 
     current = []; 
     if(myLineChart!== null){ 
     myLineChart.destroy(); 
     myLineChart = new Chart(ctx, { 
      type: 'line', 
      data: data 
     }); 
     } 
    }); 
    });

Fiddle Link

来源

2016-06-28 NeosFox

你真的尝试'.distroy（）'，因为你在你的问题中提到，而不是'.destroy（）'？ - **编辑：**没关系，我刚刚看到你的小提琴 – tektiv

对不起，这是错字。我实际上使用了destroy（），你也可以在小提琴上检查代码。 – NeosFox

你可能会发现[chartNew.js]（https://github.com/FVANCOP/ChartNew.js）更容易处理 - 它就像chart.js一样，除了api按照记录的方式工作。 – gibberish

我找到了一个解决问题的方法使用高达Charts.js

的最新版本

使用销毁并将数据存储在数组中。当您单击控件，它破坏了图表，重建与所选择的数据一个新

var mychart = new Chart(ctx,config); 
$('.selector').click(function(){ 
data.datasets = [datasets[$(this).data('index')]]; 
if(mychart!== null){ 
     mychart.destroy(); 
     mychart = new Chart(ctx, config); 
} 
});

请参阅更新的小提琴这里：https://jsfiddle.net/3563ko2t/6/

来源

2016-06-28 12:39:35

这是我需要的，但我希望两条线（首先），我想隐藏顶部标签 – NeosFox

，所以只需更换var currentData = [datasets [0]];通过var currentData =数据集; –

start，max和step？ – NeosFox

Chart.js加载新数据

回答

相关问题