6

2 つのチャートのコードがあるにもかかわらず、ウェブに 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>

私は何をすべきか？

4

1 に答える 1

7

window.onloadここでの問題は、イベントに 2 つの関数を割り当てたことです。JavaScript では、イベントが発生したときに呼び出すことができる関数は 1 つだけです。複数の機能を割り当てると、最新の割り当てによって以前の割り当てが上書きされます。そのため、円グラフは表示されますが、棒グラフは表示されません。

解決策は、両方のレンダー呼び出しを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 チームに所属しています。さらに質問がある場合は、叫び声をあげてください。

于 2015-07-28T14:58:43.177 に答える