Chart.js-多个折线图-仅显示最后一个图表

Question

我正在使用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,220,0.2)",
                strokeColor : "rgba(220,220,220,1)",
                pointColor : "rgba(220,220,220,1)",
                pointStrokeColor : "#fff",
                pointHighlightFill : "#fff",
                pointHighlightStroke : "rgba(220,220,220,1)",
                data : [160000,175000,185000,180000,185000,185000,185000,195000,200000,0,0]
            },
            {
                label: "Sales",
                fillColor : "rgba(151,187,205,0.2)",
                strokeColor : "rgba(151,187,205,1)",
                pointColor : "rgba(151,187,205,1)",
                pointStrokeColor : "#fff",
                pointHighlightFill : "#fff",
                pointHighlightStroke : "rgba(151,187,205,1)",
                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","February","March","April","May","June","July","August","September","October","November","December"],
        datasets : [
            {
                label: "Target",
                fillColor : "rgba(220,220,220,0.2)",
                strokeColor : "rgba(220,220,220,1)",
                pointColor : "rgba(220,220,220,1)",
                pointStrokeColor : "#fff",
                pointHighlightFill : "#fff",
                pointHighlightStroke : "rgba(220,220,220,1)",
                data : [19000,21000,23000,25000,27000,29000,31000,32000,33000,0,0]
            },
            {
                label: "Sales",
                fillColor : "rgba(151,187,205,0.2)",
                strokeColor : "rgba(151,187,205,1)",
                pointColor : "rgba(151,187,205,1)",
                pointStrokeColor : "#fff",
                pointHighlightFill : "#fff",
                pointHighlightStroke : "rgba(151,187,205,1)",
                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>

你的帮助将不胜感激，已经打扰我一段时间了！

提前谢谢

Answer 1

初始代码中的错误是多次调用函数window.onload。

不幸的是，事情并没有那么简单。执行第二个onload事件处理程序时，将替换第一个onload事件处理程序。[直到最后一个onload.window为止]

这个问题通常出现在当你想单独创建图形，例如，在你的页面图形中包含PHP时（因为在每个PHP页面中你都在调用window.onload）

简易解决方案：

function start() {
  func1();
  func2();
}
window.onload = start;

西蒙·威利森提议：

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}
addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
addLoadEvent(function() {
  /* more code to run on page load */
});

Answer 2

起初，我遇到了与原始问题完全相同的问题，并尝试了Arpan Das建议，但第一次尝试时没有正确。

任何有同样问题的人，可能会发现在一个页面上查看多个图形的工作示例是有用的：

<div id="canvas-holder">
<canvas id="A" width="300" height="300"/><br>
</div>

<div id="canvas-holder">
<canvas id="B" width="300" height="300"/><br>
</div>

<script>
    var pieDataA = [ { value: 50, color: "#F6BFBD" } ];
    var pieDataB = [ { value: 50, color: "#00BFBD" } ];
    window.onload = function(){
    var ctx1 = document.getElementById("A").getContext("2d");
    window.myPieA = new Chart(ctx1).Pie(pieDataA); 

    var ctx2 = document.getElementById("B").getContext("2d");
    window.myPieB = new Chart(ctx2).Pie(pieDataB); };
</script>

小提琴链接：http://fiddle.jshell.net/2omjx9dn/

Answer 3

尝试对两个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
    });   
}