javascript - 如何在 ApexChartsJS 数据中使用 php 变量？

Question

我正在使用 ApexCHartsJS，我希望 DATA 显示一个 PHP 变量，我的 PHP 变量看起来像这样 '%number%'

我创建了变量 gra / lis / voc / rea / ave ，但结果我得到空白图表

<script>
         var colors = ['#008FFB', '#00E396', '#FEB019', '#FF4560'];
         var gra = ['%AVERAGE_CATEGORY_POINTS_Grammar%'];
         var lis = ['%AVERAGE_CATEGORY_POINTS_Listening%'];
         var voc = ['%AVERAGE_CATEGORY_POINTS_Vocabulary%'];
         var rea = ['%AVERAGE_CATEGORY_POINTS_Reading%'];
         var ave = ['%CORRECT_SCORE%'];
        var options = {
            chart: {
                height: 500,
                type: 'bar',
                events: {
                    click: function(chart, w, e) {
                        console.log(chart, w, e )
                    }
                },
            },
            colors: colors,
            plotOptions: {
                bar: {
                    columnWidth: '50%',
                    distributed: true
                }
            },
            dataLabels: {
                enabled: true,
            },
            series: [{
                data: [gra,lis,voc,rea,ave]
            }],
            xaxis: {
                categories: ['Grammar / 15', 'Listening / 15', 'Vocabulary / 15', 'Reading / 15', 'Average %'],
                labels: {
                    style: {
                        colors: colors,
                        fontSize: '15px'
                    }
                }
            }
        }

        var chart = new ApexCharts(
            document.querySelector("#chart"),
            options
        );

        chart.render();
        </script>

预期数据是每个变量的数字，请分享您的知识

Answer 1

这是基于如何将变量和数据从 PHP 传递到 JavaScript 的解决方案？并将PHP 数组传递给 JavaScript 函数

<?php

// define/retrieve variables $Grammar, $Listening…

<script>
    var gra = <?php echo json_encode($Grammar);?>;
    var lis = <?php echo json_encode($Listening);?>;
    …
    var options  {
        …
        series: [{
            data: [gra, lis,…]
        }],
        …