尝试在不同图表之间切换时出错

Question

我正在开发一个应用程序，它显示在chartjs图中创建的数据，我做得很好，因为所有数据都以我想要的方式显示，但我有一个问题，那就是现在我正试图根据用户希望更改的图类型来做这件事，问题是图形被更改了，但在有多个图形的情况下，只有第一个图形被更改，其他图形默认情况下继续使用该图形，这是我的模板：

<select name="chartType" id="chartType" onchange="updateChart()" data-role="select">
<option value="pie">pie</option>
<option value="bar">Bar</option>
</select>
<canvas id="{{ project.slug }}" width="400" height="400"></canvas>

这是我的脚本：

var faltante = 100 - {{ project.porcent }};
var data = {
labels: ['{{ project.name }}', 'Falta'],
datasets: [{
data: [{{ project.porcent }}, faltante],
backgroundColor: ['#252850', '#f44611']
}],
};
var ctx = document.getElementById('{{ project.slug }}').getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: data
});
function updateChart() {
myChart.destroy();
myChart = new Chart(ctx, {
type: document.getElementById("chartType").value,
data: data
});
}

Answer 1

您可以使用所选图表类型调用updateChart函数，如下所示：

onchange="updateChart(this.value)"

然后一切都可以在updateChart函数内完成。

1. 如果图表已经存在，则销毁该图表
2. 创建具有指定类型的新图表

要实现这一点，还必须使用初始图表类型显式调用updateChart一次。

updateChart('pie');

请看下面的可运行代码片段，看看它是如何工作的。

let myChart;
function updateChart(type) {
if (myChart) {
myChart.destroy();
}
myChart = new Chart('chart', {
type: type,
data: {
labels: ['A', 'B'],
datasets: [{
data: [3, 6],
backgroundColor: ['#252850', '#f44611']
}]
},
options: {
scales: {
yAxes: [{
display: type == 'bar',
ticks: {
beginAtZero: true
}
}]
}
}
});
}
updateChart('pie');

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<select name="chartType" id="chartType" onchange="updateChart(this.value)" data-role="select">
<option value="pie">Pie</option>
<option value="bar">Bar</option>
</select>
<canvas id="chart" height="100"></canvas>