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

时间:2019-07-15 08:16:15

标签: javascript php apexcharts

我正在使用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>

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

1 个答案:

答案 0 :(得分:0)

以下是基于How do I pass variables and data from PHP to JavaScript?Pass a PHP array to a JavaScript function的解决方案

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