Блог

Главная - Вопросы по программированию - CanvasJS в функции показывает только одну диаграмму (php, js)

CanvasJS в функции показывает только одну диаграмму (php, js)

#javascript #php #canvas #canvasjs

#javascript #php #холст #canvasjs

Вопрос:

 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 для создания моей диаграммы canvas. Это работает хорошо, но если я вызываю функцию дважды на странице, отображается только одна диаграмма.

Консоль показывает следующую ошибку, но я не понимаю, что не так.

Пространство имен CanvasJS уже существует. Если вы загружаете как скрипты диаграммы, так и stockchart, просто загрузите stockchart отдельно, поскольку он включает в себя все функции диаграммы.

Спасибо за вашу помощь.

Комментарии:

1. Не используйте window.onload . Заставьте PHP сгенерировать весь файл (например myscript.php , ), убедившись, что он устанавливает заголовок content-type в JS mimetype, а затем загрузите его как script using <script src="myscript.php" type="text/javascript" async defer> , где важной частью является это defer ключевое слово: отложенные скрипты запускаются только после готовности браузера. Не заставляйте PHP генерировать встроенный JS, если вам не нужна именно такая ситуация, когда вы даже не можете сказать, связана ли проблема с поведением на стороне сервера или клиента.

Ответ №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