0

ページにグラフを複数回表示するという問題に直面しています。以下は私のコードです。私のアプリケーションは動的です。しかし、以下がチャートを2回以上表示できれば、私の問題は解決されます。このコードはチャートを1回表示しています。

<!DOCTYPE HTML>
<html>
<head>  


</head>
<body>
<script type="text/javascript">
  window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer",
    {
      title:{
       text: "Using all form of color inputs",             
        fontColor: "#6A5ACD"
      },
      axisY:{
        interlacedColor: "rgb(255,250,250)",
        gridColor: "#FFBFD5"
      },
      data: [
      {        
        type: "column",
        color: "darkgreen",
        dataPoints: [

        { x: 10, y: 71 },
        { x: 20, y: 55},
        { x: 30, y: 50 },
        { x: 40, y: 65 },
        { x: 50, y: 95 },
        { x: 60, y: 68 },
        { x: 70, y: 28 },
        { x: 80, y: 34 },
        { x: 90, y: 14}
        ]
      }
      ]
    });

    chart.render();
  }
  </script>
  <div id="chartContainer" style="height: 300px; width: 100%;"> <br> <br> <br> <br><br> <br><br> <br><br> <br><br> <br>

  <script type="text/javascript">
  window.onload = function () {
    var chart1 = new CanvasJS.Chart("chartContainer1",
    {
      title:{
       text: "Using all form of color inputs",             
        fontColor: "#6A5ACD"
      },
      axisY:{
        interlacedColor: "rgb(255,250,250)",
        gridColor: "#FFBFD5"
      },
      data: [
      {        
        type: "column",
        color: "darkgreen",
        dataPoints: [

        { x: 10, y: 71 },
        { x: 20, y: 55},
        { x: 30, y: 50 },
        { x: 40, y: 65 },
        { x: 50, y: 95 },
        { x: 60, y: 68 },
        { x: 70, y: 28 },
        { x: 80, y: 34 },
        { x: 90, y: 14}
        ]
      }
      ]
    });

    chart1.render();
  }
  </script>
  <div id="chartContainer1" style="height: 300px; width: 100%;">
  </div>

    <script type="text/javascript" src="canvasjs.js"></script>
</body>
</html>
4

2 に答える 2

1

それらを一緒に追加し、2 番目のキャンバスが作成されるたびに最初に作成されたキャンバスが空になるようにするだけです。

必要な JS は次のとおりです。

var chart = new CanvasJS.Chart("chartContainer", {
    title: {
        text: "Using all form of color inputs",
        fontColor: "#6A5ACD"
    },
    axisY: {
        interlacedColor: "rgb(255,250,250)",
        gridColor: "#FFBFD5"
    },
    data: [{
        type: "column",
        color: "darkgreen",
        dataPoints: [

            {
                x: 10,
                y: 71
            }, {
                x: 20,
                y: 55
            }, {
                x: 30,
                y: 50
            }, {
                x: 40,
                y: 65
            }, {
                x: 50,
                y: 95
            }, {
                x: 60,
                y: 68
            }, {
                x: 70,
                y: 28
            }, {
                x: 80,
                y: 34
            }, {
                x: 90,
                y: 14
            }
        ]
    }]
});
chart.render();
chart = {}; // empty your first chart


var chart1 = new CanvasJS.Chart("chartContainer1", {
    title: {
        text: "Using all form of color inputs",
        fontColor: "#6A5ACD"
    },
    axisY: {
        interlacedColor: "rgb(255,250,250)",
        gridColor: "#FFBFD5"
    },
    data: [{
        type: "column",
        color: "darkgreen",
        dataPoints: [

            {
                x: 10,
                y: 71
            }, {
                x: 20,
                y: 55
            }, {
                x: 30,
                y: 50
            }, {
                x: 40,
                y: 65
            }, {
                x: 50,
                y: 95
            }, {
                x: 60,
                y: 68
            }, {
                x: 70,
                y: 28
            }, {
                x: 80,
                y: 34
            }, {
                x: 90,
                y: 14
            }
        ]
    }]
});
chart1.render();
chart1 = {};

このJSFIDDLEを見てください

于 2015-07-09T07:24:16.677 に答える
0

みんな、ありがとう。私はGoogleチャートで正確な解決策を持っています。 https://developers.google.com/chart/interactive/docs/quick_start

よろしく、 ザヒルル

于 2015-07-10T06:24:45.797 に答える