chart.js Ajaxは別のデータセットを常に「未定義」にプッシュ

Question

次はjavascriptコードですが、実際に関連する唯一の機能は最後の機能です。私は、チャートを更新して、ページをリロードせずに別のデータセットを追加したいと考えています。しかし、理由から追加されたデータセットは常に定義されていません。一方、コメントアウトされた行は、まったく同じ配列のデータを使用します。私はjavascriptを初めて使ったので、私は何かが分からない場合、またはchart.jsがこの種のものをまったくサポートしていないかどうかはわかりません。

const CHART = document.getElementById("lineChart"); 
 

 
var dts1 = [ 
 
\t { 
 
\t \t label: "Abfall gesamt", 
 
\t \t data: Abfall_gesamt, 
 
\t } 
 
]; 
 

 
var dts2 = [ 
 
\t { 
 
\t \t label: "Abfall schadstoffhaltiger", 
 
\t \t data: Abfall_schadstoff, 
 
\t } 
 
]; 
 

 
var lineChart = new Chart(CHART, { 
 
\t type: 'line', 
 
    data: { 
 
    \t labels: Jahr, 
 
\t \t datasets: dts1 
 
    } 
 
}); 
 

 
function myFunction(){ 
 
\t //lineChart.data.datasets[0].data = Abfall_schadstoff; 
 
\t lineChart.data.datasets.push(dts2); 
 
\t lineChart.update(); 
 
}

Answer 1

問題は、配列としてあなたのデータセット（dts1とdts2）を定義している、です。そう...次いで

var dts1 = { 
    label: "Abfall gesamt", 
    data: Abfall_gesamt, 
}; 
var dts2 = { 
    label: "Abfall schadstoffhaltiger", 
    data: Abfall_schadstoff, 
}; 

とは、チャートを生成する際に、

datasets: [dts1] 

---

ᴅᴇᴍᴏ

...として datasets値を設定するように、それらは、 オブジェクトなければなりません

const CHART = document.getElementById("lineChart"); 
 

 
var Abfall_gesamt = [1, 2, 3]; 
 
var Abfall_schadstoff = [4, 5, 6] 
 

 
var dts1 = { 
 
    label: "Abfall gesamt", 
 
    data: Abfall_gesamt, 
 
    backgroundColor: 'rgba(255, 0, 0, 0.2)' 
 
}; 
 

 
var dts2 = { 
 
    label: "Abfall schadstoffhaltiger", 
 
    data: Abfall_schadstoff, 
 
    backgroundColor: 'rgba(0, 0, 255, 0.2)' 
 
}; 
 

 
var lineChart = new Chart(CHART, { 
 
    type: 'line', 
 
    data: { 
 
     labels: ['Jahr', 'Mahr', 'Kadr'], 
 
     datasets: [dts1] 
 
    }, 
 
    options: { 
 
     responsive: false, 
 
     scales: { 
 
      yAxes: [{ 
 
       ticks: { 
 
        beginAtZero: true, 
 
        stepSize: 1 
 
       } 
 
      }] 
 
     } 
 
    } 
 
}); 
 

 
function myFunction() { 
 
    //lineChart.data.datasets[0].data = Abfall_schadstoff; 
 
    lineChart.data.datasets.push(dts2); 
 
    lineChart.update(); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
 
<button id="add" onclick="myFunction()">Add Dataset</button> 
 
<canvas id="lineChart" height="190"></canvas>