0

我试图将 2 个 Canvasjs 图表放在一个 html 页面中。我已经包含了 jquery，当我只放一个图表 div 时它可以工作，一旦我添加第二个图表，它就会显示错误，只显示一个图表。

我想在一个页面中显示 2 个或更多图表，可以吗？

这是我的代码。谢谢你

<!DOCTYPE HTML>
<html>
<head>
  <script type="text/javascript" src="canvas/js/jquery.canvasjs.min.js"></script>
  
  <!FIRST JAVASCRIPT>
  <script type="text/javascript">
      window.onload = function () {
          var chart = new CanvasJS.Chart("chartContainer", {
              data: [
              {
                  type: "column",
                  dataPoints: [
                  { x: 10, y: 10 },
                  { x: 20, y: 15 },
                  { x: 30, y: 25 },
                  { x: 40, y: 30 },
                  { x: 50, y: 28 }
                  ]
              }
              ]
          });
 
          chart.render();
      }
  </script>
  <!SECOND JAVASCRIPT>
  <script type="text/javascript">
window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer2");

    chart.options.axisY = { prefix: "$", suffix: "K" };
    chart.options.title = { text: "Fruits sold in First & Second Quarter" };

    var series1 = { //dataSeries - first quarter
        type: "column",
        name: "First Quarter",
        showInLegend: true
    };

    var series2 = { //dataSeries - second quarter
        type: "column",
        name: "Second Quarter",
        showInLegend: true
    };

    chart.options.data = [];
    chart.options.data.push(series1);
    chart.options.data.push(series2);


    series1.dataPoints = [
            { label: "banana", y: 18 },
            { label: "orange", y: 29 },
            { label: "apple", y: 40 },
            { label: "mango", y: 34 },
            { label: "grape", y: 24 }
    ];

    series2.dataPoints = [
        { label: "banana", y: 23 },
        { label: "orange", y: 33 },
        { label: "apple", y: 48 },
        { label: "mango", y: 37 },
        { label: "grape", y: 20 }
    ];

    chart.render();
}
</script>
  
  
  
  
</head>
 
<body>
  <!FIRST CHART SHOW>
  <div id="chartContainer1" style="height: 500px; width: 50%;"></div>
  <!SECOND CHART SHOW>
  <div id="chartContainer2" style="height: 500px; width: 50%;"></div>
  
  
</body>
</html>

4

1 回答 1

3

首先，您不需要两个 window.onload 函数。第二个 onload 函数将覆盖第一个。因此，只需拥有一个并将两个图表代码都包含在其中一个中。

此外，创建的第一个图表需要一个具有 id 的元素，因为chartContainer它在 DOM 中不存在。将其替换为chartContainer1.

代替

var chart = new CanvasJS.Chart("chartContainer", {...});

和

var chart = new CanvasJS.Chart("chartContainer1", {...});

不是chart对两个图表都使用一个变量，而是使用两个变量，这样变量就不会被覆盖。像这样的东西

window.onload = function(){
  var chart1 = new CanvasJS.Chart("chartContainer1", {
    data: [{
      type: "column",
      dataPoints: [{
        x: 10,
        y: 10
      }, {
        x: 20,
        y: 15
      }, {
        x: 30,
        y: 25
      }, {
        x: 40,
        y: 30
      }, {
        x: 50,
        y: 28
      }]
    }]
  });

  chart1.render();

  var chart2 = new CanvasJS.Chart("chartContainer2");

  chart2.options.axisY = {
    prefix: "$",
    suffix: "K"
  };
  chart2.options.title = {
    text: "Fruits sold in First & Second Quarter"
  };

  var series1 = { //dataSeries - first quarter
    type: "column",
    name: "First Quarter",
    showInLegend: true
  };

  var series2 = { //dataSeries - second quarter
    type: "column",
    name: "Second Quarter",
    showInLegend: true
  };

  chart2.options.data = [];
  chart2.options.data.push(series1);
  chart2.options.data.push(series2);


  series1.dataPoints = [{
    label: "banana",
    y: 18
  }, {
    label: "orange",
    y: 29
  }, {
    label: "apple",
    y: 40
  }, {
    label: "mango",
    y: 34
  }, {
    label: "grape",
    y: 24
  }];

  series2.dataPoints = [{
    label: "banana",
    y: 23
  }, {
    label: "orange",
    y: 33
  }, {
    label: "apple",
    y: 48
  }, {
    label: "mango",
    y: 37
  }, {
    label: "grape",
    y: 20
  }];

  chart2.render();
};

这是一个演示http://jsbin.com/rocusuhevo/edit?html,js,output

于 2015-06-24T02:08:22.740 回答