gpt4 book ai didi

javascript - 通过Chart.js创建多个图表

转载 作者:行者123 更新时间:2023-11-27 23:32:17 25 4
gpt4 key购买 nike

我正在尝试通过 Chart.js 创建 2 个条形图,并且可以在其中两个图表之间触发,但是当我运行代码时,只有第一个图表可以正常显示,但第二个图表不能正常显示,它不断显示“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();
});

最佳答案

没有 ID“canvas”和“storage”。

getElementByID如果找不到 ID,则返回 null。

关于javascript - 通过Chart.js创建多个图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34460993/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com