时间戳

首页 > 解决方案 > CanvasJS 在函数中只显示一个图表（php、js）

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

问题描述

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

谢谢您的帮助。

标签： javascriptphpcanvascanvasjs

解决方案

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

@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

推荐阅读