javascript — создание нескольких графиков с помощью Chart.js

Я пытаюсь создать диаграмму 2 Bars с помощью Chart.js и могу выполнить переключение между двумя из них, но когда я запускаю код, только первый график может отображаться нормально, а второй — нет,
продолжает показывать «document.getElementById (…). getContext не является функцией»

что не так в моем коде или как создать 2 или более диаграмм на одной странице.

это мой код

 <input type='button' id='a' value='hide/show'>
<input type='button' id='b' value='hide/show'>

<section class="panel" id="a-chart">
<div class="panel-body">

<div style="width: 100%">
<canvas id="canvas1" height="100" width="300"></canvas>
</div>
</div>
</section>

<section class="panel" id="b-chart">
<div class="panel-body">
<div style="width: 100%">
<canvas id="canvas2" height="100" width="300"></canvas>
</div>
</div>
</section>

JS

var barChartData = {

labels : [ month[0],month[1],month[2],month[3],month[4] ] ,

datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",

data : [total[0],total[1],total[2],total[3],total[4]]
},
{
fillColor : "rgba(38,143,59,0.2)",
strokeColor : "rgba(38,143,59,0.5)",
highlightFill : "rgba(38,143,59,0.75)",
highlightStroke : "rgba(38,143,59,1)",

data : [signup[0],signup[1],signup[2],signup[3],signup[4]]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,0.8)",
highlightFill : "rgba(151,187,205,0.75)",
highlightStroke : "rgba(151,187,205,1)",

data : [nonsignup[0],nonsignup[1],nonsignup[2],nonsignup[3],nonsignup[4]]
},
{
fillColor : "rgba(250,109,80,0.2)",
strokeColor : "rgba(250,109,80,0.5)",
highlightFill : "rgba(250,109,80,0.75)",
highlightStroke : "rgba(250,109,80,1)",

data : [terminate[0 ],terminate[1 ],terminate[2 ],terminate[3 ],terminate[4 ]]
}
]
}
var barChartlimit  = {

labels : [ "100 Users","200 Users" ] ,

datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",


data : [limit100,limit200]
}

]

}


function abar(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartData, {
responsive : true
});
}

function bbar(){
var ctx = document.getElementById("storage").getContext("2d");
window.myBar = new Chart(ctx).Bar(barChartLimit, {
responsive : true
});
}

function BarLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
BarLoadEvent(abar);
BarLoadEvent(bbar);


$("#a-chart").show();
$("#b-chart").hide();

$("#a").click(function() {
$("#a-chart").show();
$("#b-chart").hide();
});

$("#b").click(function() {
$("#a-chart").hide();
$("#b-chart").show();
});

1

Решение

Там нет идентификаторов «холст» и «хранилище».

getElementByID вернуть ноль, если он не может найти идентификатор.

1

Другие решения

Других решений пока нет …