如何在一页中使用多个折线图

Question

我有一个折线图，其中的值来自 DB，并且绘制得很好。

这是代码图表＃1：

<?php
    $dataPoints = array( 
        array("y" => $todayv1, "label" => $todayh1),
        array("y" => $todayv2, "label" => $todayh2),
        array("y" => $todayv3, "label" => $todayh3),
        array("y" => $todayv4, "label" => $todayh4),
        array("y" => $todayv5, "label" => $todayh5)
    );
    $dataPoints2 = array(
       array("y" => $yv1, "label" => $yh1),
       array("y" => $yv2, "label" => $yh2),
       array("y" => $yv3, "label" => $yh3),
       array("y" => $yv4, "label" => $yh4),
       array("y" => $yv5, "label" => $yh5)
   );
?>   

<script>
     window.onload = function () {

     var chart = new CanvasJS.Chart("chartContainer", {
         title: {
              text: ""
                },
         axisY: {
              title: ""
                },
         data: [{
              type: "line",
              name: "Today",
              showInLegend: true,
              visible: true,
              dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
              },
              {
              type: "line",
              lineDashType: "dash",  
              name: "Yesterday",
              showInLegend: true,
              visible: true,
              dataPoints: <?php echo json_encode($dataPoints2, JSON_NUMERIC_CHECK); ?>
             }]
           });
             chart.render();
       }
</script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>

我试图在同一页面中复制具有相同值的相同图表。

但是当我为第二张图添加代码时，没有绘制第一张图。 我什至更改了 JS 中的变量名称以防止过度写入值，但还是一样。 一页中只绘制了一张图表。

这是第二张图表 #2 的代码：

<?php
    $dataPointsy = array( 
       array("y" => $todayv1, "label" => $todayh1),
       array("y" => $todayv2, "label" => $todayh2),
       array("y" => $todayv3, "label" => $todayh3),
       array("y" => $todayv4, "label" => $todayh4),
       array("y" => $todayv5, "label" => $todayh5)
    );
    $dataPointsy2 = array(
       array("y" => $yv1, "label" => $yh1),
       array("y" => $yv2, "label" => $yh2),
       array("y" => $yv3, "label" => $yh3),
       array("y" => $yv4, "label" => $yh4),
       array("y" => $yv5, "label" => $yh5)
    );
?>   

<script>
     window.onload = function () {

     var charty = new CanvasJS.Chart("chartContainery", {
         title: {
             text: ""
                },
         axisY: {
             title: ""
                },
         data: [{
             type: "line",
             name: "Today",
             showInLegend: true,
             visible: true,
             dataPoints: <?php echo json_encode($dataPointsy, JSON_NUMERIC_CHECK); ?>
           },
           {
           type: "line",
           lineDashType: "dash",  
           name: "Yesterday",
           showInLegend: true,
           visible: true,
           dataPoints: <?php echo json_encode($dataPointsy2, JSON_NUMERIC_CHECK); ?>
         }]
       });
       charty.render();
    }
</script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainery" style="height: 370px; width: 100%;"></div>

任何帮助是极大的赞赏..

Answer 1

您不需要在同一页面上多次包含canvasjs js 文件。 您可以包含一次并像这样使用它：

 var chart1 = new CanvasJS.Chart("chartContainer",{ title:{ text: "Live Data" }, data: [{ type: "line", dataPoints: [ { label: "apple", y: 10 }, { label: "orange", y: 15 }, { label: "banana", y: 25 }, { label: "mango", y: 30 }, { label: "grape", y: 28 } ] }] }); var chart2 = new CanvasJS.Chart("chartContainery",{ title:{ text: "Live Data" }, data: [{ type: "column", dataPoints: [ { label: "apple", y: 10 }, { label: "orange", y: 15 }, { label: "banana", y: 25 }, { label: "mango", y: 30 }, { label: "grape", y: 28 } ] }] }); chart1.render(); chart2.render();

 <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> <div id="chartContainer" style="height: 370px; width: 100%;"></div> <div id="chartContainery" style="height: 370px; width: 100%;"></div>

---

或者，如果您想并排显示图表，您也可以这样做：

 var chart1 = new CanvasJS.Chart("chartContainer",{ title:{ text: "Live Data" }, data: [{ type: "line", dataPoints: [ { label: "apple", y: 10 }, { label: "orange", y: 15 }, { label: "banana", y: 25 }, { label: "mango", y: 30 }, { label: "grape", y: 28 } ] }] }); var chart2 = new CanvasJS.Chart("chartContainery",{ title:{ text: "Live Data" }, data: [{ type: "column", dataPoints: [ { label: "apple", y: 10 }, { label: "orange", y: 15 }, { label: "banana", y: 25 }, { label: "mango", y: 30 }, { label: "grape", y: 28 } ] }] }); chart1.render(); chart2.render();

 <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> <div id="chartContainer" style="width: 45%; height: 370px; display: inline-block"></div> <div id="chartContainery" style="width: 45%; height: 370px; display: inline-block"></div>

---

因此，更新您的代码，如：

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<div id="chartContainery" style="height: 370px; width: 100%;"></div>

<script>
   // All the chart related js code here
</script>

欲了解更多信息：

• 在一个页面中渲染多个图表