0

1 つの HTML ページに 2 つの Canvasjs チャートを配置しようとしました。私はjqueryを含めましたが、チャートdivを1つだけ配置すると機能し、2番目のチャートを追加するとエラーが表示され、チャートが1つしか表示されません。

1 ページに 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

まず、2 つの window.onload 関数は必要ありません。2 番目の onload 関数は、最初の onload 関数をオーバーライドします。したがって、1つだけ持って、両方のチャートコードをそのうちの1つに含めます.

chartContainerまた、作成される最初のチャートには、DOM に存在しないid を持つ要素が必要です。それを に置き換えchartContainer1ます。

交換

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

と

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

両方のチャートに1 つの変数を使用する代わりにchart、変数が上書きされないように 2 つの変数を使用します。このようなもの

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 に答える