如何在同一 html 页面中显示两个图表

Question

我正在做一个项目，我应该在其中显示两种图表：

实时图表，我正在为此使用 smoothie.js 库。
带有缩放选项的普通图表，我正在为此使用 canvas 库。

如 smoothie.js 下面的代码所示，在正文标签上使用 "onload" :

  <!DOCTYPE html>
  <meta charset="utf-8">
  <html>
        <head>
              <title>Pression en temps réel</title>
              <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

               <script type="text/javascript" src="smoothie.js"></script>
               <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

               <script type="text/javascript">

               window.bufferX = [];

               setInterval(function () {

            if( typeof lastid == 'undefined' ) {
                $.get( "../be.php/lastid_1", function( dataA ) {
                 lastid = dataA[0].id_x+1;  
                })
            }
            else {
                $.get( "../be.php/1&"+lastid, function( dataB ) {
                     var i =0;
                     var j=0;

                     if( typeof counter == 'undefined' ) {
                            counter = 0;
                        }
                    if( typeof pck_prev == 'undefined' ) {
                                pck_prev = -1;
                            }

                    lastid = dataB[0].last_id;

                     for(i=0;i<dataB.length;i++) {

                        for(j=0;j<dataB[i].data.length;j++) {
                            if(dataB[i].data[j] !== "" && dataB[i].data[j] !== 0 && typeof  dataB[i].data[j] !== 'undefined' && pck_prev !== dataB[i].pck) {
                                window.bufferX.push(dataB[i].data[j]);
                            }
                        }
                        pck_prev = dataB[i].pck;
                     }
                     if(typeof window.bufferX[counter] == 'undefined') {
                       data_p.append(new Date().getTime(), window.bufferX[counter-1]);
                     }
                })
            } 
        },3000);



          var data_p = new TimeSeries();
          setInterval(function() {

           if(window.bufferX.length>50 && counter <window.bufferX.length)
                                 {

                                     if( typeof counter == 'undefined' ) {
                                        counter = 0;
                                    }

                                    else {
                                            data_p.append(new Date().getTime(), window.bufferX[counter]);
                                            counter++;
                                    } 
                                   }
          }, 250);       

  function createTimeline() {
    var chart = new SmoothieChart({responsive: true});
    chart.addTimeSeries(data_p, { strokeStyle: 'rgba(0, 255, 0, 1)', fillStyle: 'rgba(0, 255, 0, 0.2)', lineWidth: 4 });
    chart.streamTo(document.getElementById("chart"), 250);
  }

</script>
<script type="text/javascript">
      window.onload = function () {

        var chart = new CanvasJS.Chart("chartContainer",
        {
          zoomEnabled: true, 
          title:{
            text: "Try Zooming And Panning" 
          },
          axisY:{
            includeZero: false
          },
          data: data,  // random generator below

       });

        chart.render();
      }

        var limit = 1000;    //increase number of dataPoints by increasing this
        var y = 0;
        var data = []; var dataSeries = { type: "line" };
        var dataPoints = [];
        for (var i = 0; i < limit; i += 1) {
            y += (Math.random() * 10 - 5);
             dataPoints.push({
              x: i - limit / 2,
              y: y                
               });
            }
         dataSeries.dataPoints = dataPoints;
         data.push(dataSeries);               

       </script>
       </head>
  <body onload="createTimeline()">

           <canvas id="chart" style="width:100%; height:700px;"></canvas>
           <div id="chartContainer" style="height: 700px; width: 100%;"> 
                   </div>
   </body>
  </html>

问题是，如果我从 body 标签中删除 onload，我将只得到 canvas 图表，如果我允许它，我将只得到实时图表。

我希望在我的页面上显示这两个图表。

感谢阅读。

Answer 1

window.onload 和 <body onload="yourfunction();"> 是使用同一事件的不同方式，您同时使用这两种方式导致了问题。解决此问题的最简单方法是，您应该在 body 标记的 window.onload 或 onload 中的一个事件中编写这两个实现。找到更新后的 fiddle here.

您会发现两个图表同时可见。

如何在同一 html 页面中显示两个图表

How to show two charts in the same html page

javascript

canvas

smoothie.js