javascript - chart.js ajax总是将另一个数据集“未定义”

以下是我的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();
}

最佳答案

问题是，您要将数据集（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>

关于javascript - chart.js ajax总是将另一个数据集“未定义”，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43718610/