如何在一頁中使用多個折線圖

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>

欲了解更多信息：

• 在一個頁面中渲染多個圖表