Chỉ có thể tải một Zingchart

Question

tôi gặp sự cố khi tôi chỉ có thể tải 1 zingchart trong web của mình mặc dù tôi có mã cho 2 biểu đồ.
Mã sẽ chỉ tạo biểu đồ mới nhất, trong trường hợp này là biểu đồ hình tròn và bỏ qua biểu đồ thanh.
Dưới đây là mã của tôi

<?php 
//getDBConnect function 
require 'dbconnect.php'; 

//Get ID from form 
$id = $_GET['staffid']; 

//connect to database 
$con = getDBConnect(); 

if(!mysqli_connect_errno($con)){ 
$sqlQueryStr = 
     "SELECT a.ai_Name, r.duration " . 
     "FROM report AS r, academicinstitution AS a " . 
     "WHERE r.ai_Id = a.ai_Id "; 

$result = mysqli_query($con,$sqlQueryStr); 

mysqli_close($con); 
} else { 
    echo "Failed to connect to MySQL: " . mysqli_connect_error(); 
} 

//Get data into array 
$emparray = array(); 
while ($row = mysqli_fetch_assoc($result)) { 
    $emparray[] = $row; 
} 

//Group array by ai_Name 
$grouparray = array(); 
    foreach($emparray as $item) 
    { 
     if(!isset($grouparray[$item["ai_Name"]])) 
     $grouparray[$item["ai_Name"]] = 0; 

     $grouparray[$item["ai_Name"]] += $item["duration"]; 
    } 
?> 
<script> 
var dataBar=[ 
<?php 
    foreach($grouparray as $keys => $value){ 
     echo $value. ","; 
    } 
?>]; 

window.onload=function(){ 
    zingchart.render({ 
     id:'chartBar', 
     height:400, 
     width:600, 
     data:{ 
      "graphset":[ 
      { 
       "type":"bar", 
       "title":{"text":"BarChart"}, 
       "series":[ 
        { 
         "values":dataBar 
        } 
       ] 
      } 
      ] 
     } 
    }); 
}; 
</script> 

<script> 
    var dataPie=[ 
     <?php 
      foreach($grouparray as $keys => $value){ 
       echo '{'; 
       echo '"text":"'.$keys.'","values":['.$value.']'; 
       echo '},'; 
      } 
     ?>]; 

    window.onload=function(){ 
     zingchart.render({ 
      id:'chartPie', 
      height:400, 
      width:600, 
      data:{ 
       "graphset":[ 
       { 
        "type":"pie", 
        "title":{"text":"PieChart"}, 
        "series":dataPie 
       } 
       ] 
      } 
     }); 
    }; 
</script> 

<div id="chartBar"></div> 
<div id="chartPie"></div> 

tôi nên làm gì?

Answer 1

Vấn đề ở đây là bạn đã gán hai hàm cho sự kiện window.onload. JavaScript chỉ cho phép một hàm được gọi khi sự kiện đó kích hoạt. Nếu bạn gán nhiều chức năng cho nó, nhiệm vụ mới nhất sẽ ghi đè lên bất kỳ chức năng nào trước đó. Đó là lý do tại sao biểu đồ hình tròn của bạn hiển thị chứ không phải biểu đồ thanh của bạn.

Giải pháp là đặt cả hai cuộc gọi kết xuất bên trong cuộc gọi lại window.onload.

Đây là những gì trông giống như:

<script> 
var dataBar=[ 
<?php 
    foreach($grouparray as $keys => $value){ 
     echo $value. ","; 
    } 
?>]; 

var dataPie=[ 
<?php 
    foreach($grouparray as $keys => $value){ 
     echo '{'; 
     echo '"text":"'.$keys.'","values":['.$value.']'; 
     echo '},'; 
    } 
?>]; 

window.onload=function(){ 
    zingchart.render({ 
     id:'chartBar', 
     height:400, 
     width:600, 
     data:{ 
      "graphset":[ 
      { 
       "type":"bar", 
       "title":{"text":"BarChart"}, 
       "series":[ 
        { 
         "values":dataBar 
        } 
       ] 
      } 
      ] 
     } 
    }); 

    zingchart.render({ 
     id:'chartPie', 
     height:400, 
     width:600, 
     data:{ 
      "graphset":[ 
      { 
       "type":"pie", 
       "title":{"text":"PieChart"}, 
       "series":dataPie 
      } 
      ] 
     } 
    }); 
} 
</script> 

Tôi đang trên đội ZingChart. Holler nếu bạn có thêm bất kỳ câu hỏi nào.