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

我正在使用ApexCHartsJS，我希望数据显示一个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>

变量颜色=['#008FFB'、'#00E396'、'#FEB019'、'#FF4560']；
var gra=['%AVERAGE_CATEGORY_POINTS_Grammar%]；
var lis=['%AVERAGE_CATEGORY_POINTS_Listing%']；
var voc=['%AVERAGE_CATEGORY_POINTS_词汇%']；
var rea=['%AVERAGE_CATEGORY_POINTS_Reading%]；
var ave=['%CORRECT_SCORE%']；
变量选项={
图表：{
身高：500，
类型：'bar'，
活动：{
点击：功能（图表、w、e）{
控制台日志（图表，w，e）
}
},
},
颜色：颜色，
打印选项：{
酒吧：{
列宽：“50%”，
是的
}
},
数据标签：{
启用：对，
},
系列：[{
数据：[gra、lis、voc、rea、ave]
}],
xaxis：{
类别：[“语法/15”，“听力/15”，“词汇/15”，“阅读/15”，“平均%”，
标签：{
风格：{
颜色：颜色，
字体大小：“15px”
}
}
}
}
var图表=新的ApexCharts(
文档查询选择器（“图表”），
选择权
);
chart.render（）；

预期数据是每个var的数字，

---

请分享您的知识

以下是基于和的解决方案

；
var-lis=；
…
var期权{
…
系列：[{
数据：[gra，lis，…]
}],
…

以下是基于和的解决方案

；
var-lis=；
…
var期权{
…
系列：[{
数据：[gra，lis，…]
}],
…

<?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,…]
        }],
        …