添加第二个图表时..第一个图表正在消失（画布图表）答案

【问题标题】：When adding 2nd chart.. first chart is disappearing (canvas charts)添加第二个图表时..第一个图表正在消失（画布图表）
【发布时间】：2020-05-24 14:31:59
【问题描述】：

我需要显示 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 添加第二个 .. 第一个图表就会消失。它们都工作正常，但只显示第二个。

【问题讨论】：

标签： javascript php canvasjs

【解决方案1】：

这有点猜测，因为我无法运行您的代码，但它与调用 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>

【讨论】：

谢谢..我想问题是..第一次加载被第二次覆盖
太棒了，很高兴它成功了。不要忘记接受作为答案

【解决方案2】：

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

【讨论】：

将两个数据添加在一起，并将您的第二个图表脚本写入您的第一个 window.load() 方法。应该就是这样
没有 Ozzyn，这里不是这种情况..谢谢你的时间