javascript - Chart.js ajax推送另一个数据集总是 "undefined"

Question

以下是我的 javascript 代码，但唯一真正相关的是最后一个函数。我想更新图表以添加另一个数据集，而不重新加载页面。但由于某种原因，添加的数据集始终是未定义的。另一方面，注释掉的行使用完全相同的数据数组，可以正常工作。因为我是 javascript 新手，所以我不确定我是否错过了一些明显的东西，或者 Chart.js 是否根本不支持这种事情。

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

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

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

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

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

Answer 1

问题是，您将数据集(dts1 和 dts2)定义为数组。它们应该是一个对象，就像这样......

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

然后，在生成图表时，将datasets值设置为...

datasets: [dts1]

<小时/>

ᴅᴇᴍᴏ

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>