我正在使用chart.js在一个页面上显示多个折线图.但是,即使我将它们称为#canvas1和#canvas2,也只显示最后一个图表.某些东西必须在某个地方发生冲突,我尝试过大多数事情,但没有任何快乐.这是两个图表,它只显示最后一个：
图一
@H_403_4@<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>图二：
@H_403_4@<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变量使用不同的名称.
@H_403_4@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
});
}
