我正在使用chart.js在一个页面上显示多个折线图.但是,即使我将它们称为#canvas1和#canvas2,也只显示最后一个图表.某些东西必须在某个地方发生冲突,我尝试过大多数事情,但没有任何快乐.这是两个图表,它只显示最后一个：
图一
<script type="text/javascript">
var lineChartData = {
labels : ["January","February","March","April","May","June","July","August","September","October","November","December"],datasets : [
{
label: "Target",fillColor : "rgba(220,220,0.2)",strokeColor : "rgba(220,1)",pointColor : "rgba(220,pointStrokeColor : "#fff",pointHighlightFill : "#fff",pointHighlightStroke : "rgba(220,data : [160000,175000,185000,180000,195000,200000,0]
},{
label: "Sales",fillColor : "rgba(151,187,205,strokeColor : "rgba(151,pointColor : "rgba(151,pointHighlightStroke : "rgba(151,data : [<?PHP echo $stockJanuary ?>,<?PHP echo $stockFebruary ?>,<?PHP echo $stockMarch ?>,<?PHP echo $stockApril ?>,<?PHP echo $stockMay ?>,<?PHP echo $stockJune ?>,<?PHP echo $stockJuly ?>,<?PHP echo $stockAugust ?>,<?PHP echo $stockSeptember ?>,<?PHP echo $stockOctober ?>,<?PHP echo $stockNovember ?>,<?PHP echo $stockDecember ?>]
}
]
}
window.onload = function(){
var ctx = document.getElementById("canvas1").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData,{
responsive: true
});
}
</script>
图二：
<script type="text/javascript">
var lineChartData = {
labels : ["January",data : [19000,21000,23000,25000,27000,29000,31000,32000,33000,data : [<?PHP echo $northJanuary ?>,<?PHP echo $northFebruary ?>,<?PHP echo $northMarch ?>,<?PHP echo $northApril ?>,<?PHP echo $northMay ?>,<?PHP echo $northJune ?>,<?PHP echo $northJuly ?>,<?PHP echo $northAugust ?>,<?PHP echo $northSeptember ?>,<?PHP echo $northOctober ?>,<?PHP echo $northNovember ?>,<?PHP echo $northDecember ?>]
}
]
}
window.onload = function(){
var ctx = document.getElementById("canvas2").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData,{
responsive: true
});
}
</script>
非常感谢你的帮助,一直困扰我一段时间！
提前致谢
解决方法
尝试为两个ctx变量使用不同的名称.
window.onload = function(){
var ctx = document.getElementById("canvas2").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData,{
responsive: true
});
var ctx2 = document.getElementById("canvas1").getContext("2d");
window.myLine = new Chart(ctx2).Line(lineChartData2,{
responsive: true
});
}
