Javascript 只能加载一个Zingchart

我有一个问题，即使我有两个图表的代码，我也只能在我的web中加载1个zingchart。
代码只会生成最新的图表，在本例中是饼图，而忽略条形图。
下面是我的代码

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

var数据库=[
];
window.onload=function（）{
zingchart.render({
id:'chartBar'，
身高：400，
宽度：600，
数据：{
“图形集”：[
{
“类型”：“条”，
“标题”：{“文本”：“条形图”}，
“系列”：[
{
“价值”：数据库
}
]
}
]
}
});
};
var数据派=[
];
window.onload=function（）{
zingchart.render({
id:'chartPie'，
身高：400，
宽度：600，
数据：{
“图形集”：[
{
“类型”：“馅饼”，
“标题”：{“正文”：“图表”}，
“系列”：数据派
}
]
}
});
};

---

我该怎么办？

这里的问题是您为

窗口.onload

事件分配了两个函数。JavaScript只允许在该事件触发时调用一个函数。如果为其分配多个功能，则最新的分配将覆盖以前的任何分配。这就是为什么要呈现饼图而不是条形图

解决方案是将两个渲染调用放在

窗口内。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>

var数据库=[
];
var数据派=[
];
window.onload=function（）{
zingchart.render({
id:'chartBar'，
身高：400，
宽度：600，
数据：{
“图形集”：[
{
“类型”：“条”，
“标题”：{“文本”：“条形图”}，
“系列”：[
{
“价值”：数据库
}
]
}
]
}
});
zingchart.render({
id:'chartPie'，
身高：400，
宽度：600，
数据：{
“图形集”：[
{
“类型”：“馅饼”，
“标题”：{“正文”：“图表”}，
“系列”：数据派
}
]
}
});
}

---

我是ZingChart队的。如果您还有任何问题，请呼叫。

如果答案解决了您的问题，请接受它以帮助他人。