添加第二张图表时。第一张图表消失（画布图表）

Question

我需要显示2个图形，一个是条形图..另一个是php.so中的饼图，使用画布图表。但是当m添加第二个图表时，第一个图表会自动消失。

   $dataPoints = array(
        array("y" => $total_announcement, "label" => "Total Announcement" ),
        array("y" => $active_announcement, "label" => "Active" ),
        array("y" => $pending_announcement, "label" => "Pending " ),
        array("y" => $other_announcement, "label" => "Others" )
    );
    <script>
    window.onload = function() {

    var chart = new CanvasJS.Chart("chartContainer", {
        animationEnabled: true,
        theme: "light2",
        title:{
            text: ""
        },
        axisY: {
            title: "Number Of Announcement"
        },
        data: [{
            type: "column",
            yValueFormatString: "#,##0.## ",
            dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
        }]
    });
    chart.render();

    }
    </script>
    <div id="chartContainer" style="height: 370px; width: 100%;"></div>

这是我的第一个工作正常的图表。

$dataPoints2 = array( 
    array("label"=>"Industrial", "y"=>51.7),
    array("label"=>"Transportation", "y"=>26.6),
    array("label"=>"Residential", "y"=>13.9),
    array("label"=>"Commercial", "y"=>7.8)
)
<script>
window.onload = function() {


var chart2 = new CanvasJS.Chart("chartContainer2", {
    theme: "light2",
    animationEnabled: true,
    title: {
        text: "World Energy Consumption by Sector - 2012"
    },
    data: [{
        type: "pie",
        indexLabel: "{y}",
        yValueFormatString: "#,##0.00\"%\"",
        indexLabelPlacement: "inside",
        indexLabelFontColor: "#36454F",
        indexLabelFontSize: 18,
        indexLabelFontWeight: "bolder",
        showInLegend: true,
        legendText: "{label}",
        dataPoints: <?php echo json_encode($dataPoints2, JSON_NUMERIC_CHECK); ?>
    }]
});
chart2.render();

}
</script>
<div id="chartContainer2" style="height: 370px; width: 100%;"></div>

这是我的第二张图表。一旦添加第二个m，第一个图表就会消失。两者都工作正常，但仅显示第二个。

Answer 1

我无法发表评论，因此我将其发布为答案。您如何在页面上放置两个div（chartContainer和chartContainer2）？一个div可能覆盖另一个。

Answer 2

这有点猜测，因为我无法运行您的代码，但这与两次调用window.onload有关吗？

您可以将您的代码合并到以下内容中吗？>

$dataPoints = array(
        array("y" => $total_announcement, "label" => "Total Announcement" ),
        array("y" => $active_announcement, "label" => "Active" ),
        array("y" => $pending_announcement, "label" => "Pending " ),
        array("y" => $other_announcement, "label" => "Others" )
    );    

$dataPoints2 = array( 
    array("label"=>"Industrial", "y"=>51.7),
    array("label"=>"Transportation", "y"=>26.6),
    array("label"=>"Residential", "y"=>13.9),
    array("label"=>"Commercial", "y"=>7.8)
)
<script>
window.onload = function() {

var chart = new CanvasJS.Chart("chartContainer", {
        animationEnabled: true,
        theme: "light2",
        title:{
            text: ""
        },
        axisY: {
            title: "Number Of Announcement"
        },
        data: [{
            type: "column",
            yValueFormatString: "#,##0.## ",
            dataPoints: <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
        }]
    });    


var chart2 = new CanvasJS.Chart("chartContainer2", {
    theme: "light2",
    animationEnabled: true,
    title: {
        text: "World Energy Consumption by Sector - 2012"
    },
    data: [{
        type: "pie",
        indexLabel: "{y}",
        yValueFormatString: "#,##0.00\"%\"",
        indexLabelPlacement: "inside",
        indexLabelFontColor: "#36454F",
        indexLabelFontSize: 18,
        indexLabelFontWeight: "bolder",
        showInLegend: true,
        legendText: "{label}",
        dataPoints: <?php echo json_encode($dataPoints2, JSON_NUMERIC_CHECK); ?>
    }]
});

chart.render();
chart2.render();

}
</script>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<div id="chartContainer2" style="height: 370px; width: 100%;"></div>