Question

我有一个问题，我只能在我的网站上加载1个zingchart，即使我有2个图表的代码代码将生成最新的图表，在这种情况下，饼图并忽略条形图以下是我的代码

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

我该怎么办？

Answer 1

这里的问题是您已为window.onload事件分配了两个功能。 JavaScript只允许在该事件触发时调用一个函数。如果为其分配多个功能，则最新的分配将覆盖之前的任何分配。这就是你的饼图渲染而不是你的条形图的原因。

解决方案是将两个渲染调用放在window.onload回调中。

以下是这样的：

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

我是ZingChart团队的成员。霍勒，如果你还有其他问题。

只能加载一个Zingchart

1 个答案: