添加第二个图表时..第一个图表正在消失（canvas 个图表）

Question

我需要显示 2 个图表，一个是条形图 ..另一个是饼图 php.so m 使用 canvas charts.But 当 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>

这是我的第二张图表。一旦我添加了第二个……第一个图表就消失了。它们都工作正常，但只显示一个，即第二个。

Answer 1

我无法 post 发表评论，所以我会 post 这个作为答案。您如何在页面上放置两个 divs（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>

添加第二个图表时..第一个图表正在消失（canvas 个图表）

When adding 2nd chart.. first chart is disappearing (canvas charts)

javascript

php

canvasjs