替換chartjs數據

Question

如何在ChartJS實例中替換myChart["data"]？我從後端收到兩組數據。我可以用myChart["data"]["datasets"][0]["data"] = [1,2,3];替換單個數據點，但不是整個數據對象。這是爲什麼？

以下代碼不起作用（請參閱代碼中的「THIS DO NOT NOT WORK」註釋）。

HTML：

<div class="col s12 m6 l8"> 
    <span id="control1">UMSCHALTER</span> 
    <canvas id="kontakteChart" width="600" height="300"></canvas> 
</div> <!-- col --> 

進口/ VERSION：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js" type="text/javascript"></script> 

JS：

// Supplied Datasets to display 
var data1 = {"labels": ["1", "2", "3"], "datasets": [{"label": "Contacts", "data": [20, 15, 10], "backgroundColor": "rgba(255, 99, 132, 0.2)", "borderColor": "rgba(255,99,132,1)", "borderWidth": 1}]}; 
var data2 = {"labels": ["1", "2", "3"], "datasets": [{"label": "Contacts", "data": [10, 23, 41], "backgroundColor": "rgba(255, 99, 132, 0.2)", "borderColor": "rgba(255,99,132,1)", "borderWidth": 1}]}; 

// Draw the initial chart 
var kChartCanvas = $("#kontakteChart"); 
var myChart = new Chart(kChartCanvas, { 
    type: 'bar', 
    data: data1, 

    options: { 
     scales: { 
      yAxes: [{ 
       ticks: { 
        beginAtZero:true 
       } 
      }] 
     } 
    } 
}); 

// Called on Click 
function chartContent(){ 
    console.log(myChart["data"]); 
    myChart["data"] = data2; // <<<<------ THIS DOES NOT WORK. 
    myChart.update(); 
} 

// Set the listener for the click function 
$(document).ready(function() { 
    $("#control1").click(chartContent); 
}); 

Answer 1

設置myChart["config"]["data"] = data2代替

// Supplied Datasets to display 
 
var data1 = { "labels": ["1", "2", "3"], "datasets": [{ "label": "Contacts", "data": [20, 15, 10], "backgroundColor": "rgba(255, 99, 132, 0.2)", "borderColor": "rgba(255,99,132,1)", "borderWidth": 1 }] }; 
 
var data2 = { "labels": ["1", "2", "3"], "datasets": [{ "label": "Contacts", "data": [10, 23, 41], "backgroundColor": "rgba(255, 99, 132, 0.2)", "borderColor": "rgba(255,99,132,1)", "borderWidth": 1 }] }; 
 

 
// Draw the initial chart 
 
var kChartCanvas = $("#kontakteChart")[0].getContext('2d'); 
 
var myChart = new Chart(kChartCanvas, { 
 
    type: 'bar', 
 
    data: data1, 
 
    options: { 
 
     scales: { 
 
      yAxes: [{ 
 
       ticks: { 
 
        beginAtZero: true 
 
       } 
 
      }] 
 
     } 
 
    } 
 
}); 
 

 
// Called on Click 
 
function chartContent() { 
 
    myChart["config"]["data"] = data2; //<--- THIS WORKS! 
 
    myChart.update(); 
 
} 
 

 
// Set the listener for the click function 
 
$(document).ready(function() { 
 
    $("#control1").click(chartContent); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
 
<canvas id="kontakteChart"></canvas> 
 
<button id="control1">UMSCHALTER</button>