javascript - 使用 php 和 chart.js 在页面加载后向图表添加数据

Question

问题：嗯，我正在尝试使用chart.js 生成一个图表，其中包含从查询中检索到的信息。控制器检索数据，然后我使用负责在图表中插入新数据的函数中的数据addData。但是这个函数只有在页面加载之后才会调用，因为这个函数addData只有在页面加载之后才可用。主要问题是，标签显示正确，但数据未出现在图表中。

当我使用它console.log时chart.data，它显示了我试图插入的正确数据：

Objectdatasets: Array(1)0: {label: "Eventos", lineTension: 0.3, backgroundColor: "rgba(78, 115, 223, 0.05)", borderColor: "rgba(78, 115, 223, 1)", pointRadius: 3, …}data: (12) ["26", "26", "34", "22", "36", "39", "20", "6", "11", "13", "18", "250"]0: "26"1: "26"2: "34"3: "22"4: "36"5: "39"6: "20"7: "6"8: "11"9: "13"10: "18"11: "250"length: 12__proto__: Array(0)label: "Eventos"length: 1__proto__: Array(0)labels: (12) ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]0: "Jan"1: "Feb"2: "Mar"3: "Apr"4: "May"5: "Jun"6: "Jul"7: "Aug"8: "Sep"9: "Oct"10: "Nov"11: "Dec"length: 12__proto__: Array(0)__proto__: Object

返回图表信息的控制器。

<?php
    function chart_area_eventos(){
            
            foreach(parent::get_chart_area_eventos() as $data){
    
                $values[] = $data->{'counter'};
                $labels[] = $data->{'month_name'};
            }
            $labels = json_encode($labels);
            $values = json_encode($values);
            ?>
        <script>
        window.addEventListener('load',function() {
        
            addData(myLineChart, <?php echo $labels.','.$values;?> , 'Eventos');
        });
        </script>
<?php } ?>

图表的生成位置。

<div class="chart-area">
  <canvas id="myAreaChart"></canvas>
    <?php echo eventosController::chart_area_eventos();
</div>

JS 函数负责添加新值和新标签。

<script>
        function addData(chart, labels, data, label) {
            chart.data.labels = labels;
            chart.data.datasets.label = label;
            chart.data.datasets[0].label = label;
            chart.data.datasets.data = data;
        chart.update();
        chart.render();
        }
</script>

标签： javascriptphphtmlchart.js