Canviasjs没有多次显示图表

canviasjs is not showing chart multiple times

本文关键字：显示图 Canviasjs      更新时间：2023-09-26

我面临的问题是在一个页面中多次显示图表。以下是我的代码。我的应用是动态的。但是如果下面的图表可以显示两次以上，我的问题就解决了。此代码只显示一次图表。

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

你只需要把它们加在一起，并确保在创建第二个画布时清空第一个画布:

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

谢谢大家。我用谷歌图表找到了精确的解决方案。https://developers.google.com/chart/interactive/docs/quick_start

问候,Zahirul

相关文章：