Javascript 使用ChartJS单击更改数据
我有一张欧元价值的折线图。我希望能够更改$中的数据 欧元图表运行良好,但我无法更改数据 我的图表:Javascript 使用ChartJS单击更改数据,javascript,chart.js,Javascript,Chart.js,我有一张欧元价值的折线图。我希望能够更改$中的数据 欧元图表运行良好,但我无法更改数据 我的图表: <canvas id="myChart" width="820" height="650"></canvas> let ctx = document.getElementById("myChart"); Chart.defaults.global.defaultFontSize = 15; var dataEu = [{{{ cote_1989_e
<canvas id="myChart" width="820" height="650"></canvas>
let ctx = document.getElementById("myChart");
Chart.defaults.global.defaultFontSize = 15;
var dataEu = [{{{ cote_1989_eu_base_eu }}}, {{{ cote_2004_base_eu }}}, {{{ cote_2014_base_eu }}}, {{{ cote_2017_base_eu }}}, {{{ cote_actual_base_eu }}}];
var dataUsd = [{{{ cote_1989_eu_base_usd }}}, {{{ cote_2004_base_eu }}}, {{{ cote_2014_base_usd }}}, {{{ cote_2017_base_usd }}}, {{{ cote_actual_base_usd }}}];
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["1989", "2004", "2014", "2017", "2019"],
datasets: [
{
spangaps: true,
label: 'Exceptionnel',
data: dataEu,
backgroundColor: 'transparent',
borderColor: '#00C853',
borderWidth: 4,
pointWidth: 3,
pointRadius: 5,
pointHoverRadius: 6,
pointBorderColor: '#FFF',
pointBackgroundColor: '#00C853',
pointBorderWidth: 1,
pointHitRadius: 100,
datalabels: {
display: false
}
}]}
});
假设
dataUs
和dataEu
是带有值的数组,您可以使用如下javascript轻松访问和更改图表的数据:
myChart.data.dataset[0]。data=dataUs;//假设dataUs是一个数组
完成此操作后,您需要使用
myChart.update();
这是一个功能齐全的。可以随意操纵和玩弄它
myChart.update();