Question

我在页面中多次显示图表时遇到问题。以下是我的代码。我的申请是动态的。但如果以下内容可以显示图表两次或更多，我的问题将得到解决。此代码显示一次图表。

<!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>

Answer 1

您只需将它们添加到一起，并确保每次创建第二个时都清空第一个创建的画布：

这是你需要的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

Answer 2

谢谢大家。我有谷歌图表的确切解决方案。 https://developers.google.com/chart/interactive/docs/quick_start

此致 Zahirul

canviasjs没有多次显示图表

2 个答案: