Chart.js新しいデータをロード

Question

私は新しいデータを読み込もうとしています（特定のグラフを隠すため）、destroy()の機能like hereを試しましたが、機能していません。

1つのデータ（2つ）をロードしたいが、どちらを表示するかを選択したい。

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

Answer 1

私は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/