CanvasJS 在函数中只显示一个图表（php、js）答案

【问题标题】：CanvasJS in function only shows one chart (php, js)CanvasJS 在函数中只显示一个图表（php、js）
【发布时间】：2021-04-02 09:25:26
【问题描述】：

function timeDataToPointChart($dataPoints,$title,$xlabel,$ylabel,$chartID) { 
?>
    
    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
    <script>
    window.onload = function () {
    
    
    var NameOfChart = "<?php echo $chartID; ?>"
     
    window[NameOfChart] = new CanvasJS.Chart("chartContainer",
    {
        animationEnabled: true,
        title:{
        text: "<?php echo $title; ?>"
    },
    axisX:{
        title: "<?php echo $xlabel; ?>",
        valueFormatString: "MM/YYYY",
        crosshair: {
        enabled: true
        }
    },
    axisY: {
        title: "<?php echo $ylabel; ?>"
    },
    data: [
    {        
        type: "line",
        xValueType: "dateTime",
        dataPoints:     
        
        <?php echo json_encode($dataPoints, JSON_NUMERIC_CHECK); ?>
    }
    ]
    });

      window[NameOfChart].render();
    
    function toggleDataSeries(e){
    if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
        e.dataSeries.visible = false;
    }
    else{
        e.dataSeries.visible = true;
    }
      window[NameOfChart].render();
    }
    
    }
    </script>
    

    <div id="chartContainer" style="height: 370px; width: 650px;"></div>
          
<?php
}
?>

我使用这个 PHP 函数来生成我的画布图表。这很好用，但如果我在一个页面上调用该函数两次，则只显示一个图表。

控制台显示以下错误，但我不明白出了什么问题。

CanvasJS 命名空间已经存在。如果您同时加载图表和股票图表脚本，只需单独加载股票图表，因为它包含所有图表功能。

感谢您的帮助。

【问题讨论】：

不要使用window.onload。让 PHP 生成整个文件（例如myscript.php），确保将内容类型标头设置为JS mimetype，然后使用@987654324 将that 作为脚本加载@，其中重要的部分是 defer 关键字：延迟脚本仅在浏览器准备好后运行。不要让 PHP 生成内联 JS，除非您确实想要这种情况，您甚至无法判断问题是由于服务器端行为还是客户端行为造成的。

标签： javascript php canvas canvasjs

【解决方案1】：

如 canvasJs 所述，我已经在我的 Laravel 应用程序中相应地实现了代码，如下所示

@foreach($records as $record)
<div id="chartContainer{{$record->employeeRequisitionId}}" style="height: 270px; width: 100%;"></div>
@endforeach

@push('after_scripts')

<script>
    window.onload = function () {
        @foreach($records as $record)
        const chart{{$record->employeeRequisitionId}} = new CanvasJS.Chart ( "chartContainer{{$record->employeeRequisitionId}}", {
            animationEnabled: true,
            theme: "light2",
            title: {
                text: "Requisition According Fiscal Year"
            },
            axisY: {
                suffix: "%",
                scaleBreaks: {
                    autoCalculate: false
                }
            },
            data: [{
                type: "column",
                yValueFormatString: "#,##0\"%\"",
                indexLabel: "{y}",
                indexLabelPlacement: "inside",
                indexLabelFontColor: "white",
                dataPoints: {!! formatRequisitionAccordingFiscalYearData($record) !!}
            }]
        } );
        @endforeach

        @foreach($records as $record)
            chart{{$record->employeeRequisitionId}}.render ();
        @endforeach
    }
</script>

@endpush

【讨论】：