带有逗号分隔值的 Javascript 变量在 HighChart 中不起作用

Question

我一直在使用 highchart 来图形显示我的记录。 HighChart 与我的 php 变量配合使用，其中包含逗号分隔值，效果很好。但是，我无法使用带有逗号分隔值的 javascript 变量来完成此操作。请在这件事上给予我帮助。非常感谢您的帮助。谢谢。我的代码如下所示。

Javascript

 <script type="text/javascript">

    var res = [];
    var data_graph = [];

        function show_graphics(){

            $.post("<?php echo base_url(); ?>main_controller/show_monthly_analytics_ajax", '', function(data){

                  if( data.notify == "Success" ){

                    Object.keys(data.upload_data).forEach(function(key) {
                        res.push(data.upload_data[key]);
                    });

                    data_graph = res.join(",");
                    console.log(data_graph );

                  } else{

                    console.log(data.notify);

                  }                  

            },'json');


            $('#container').highcharts({
                chart: {
                    type: 'column',
                    margin: 75,
                    options3d: {
                        enabled: true,
                        alpha: 10,
                        beta: 25,
                        depth: 70
                    }
                },
                title: {
                    text: '3D chart with null values'
                },
                subtitle: {
                    text: 'Notice the difference between a 0 value and a null point'
                },
                plotOptions: {
                    column: {
                        depth: 25
                    }
                },
                xAxis: {
                    categories: Highcharts.getOptions().lang.shortMonths
                },
                yAxis: {
                    title: {
                        text: null
                    }
                },
                series: [{
                    name: 'Sales',
                    data: [data_graph]
                }]
            });

        }

</script>

当我查看控制台时，变量数组 data_graph 显示的值似乎是正确的，但图表从未显示图形。这有什么问题吗？

修改

<script type="text/javascript">

    var res = [];


        function show_graphics(){

            $.post("<?php echo base_url(); ?>main_controller/show_monthly_analytics_ajax", '', function(data){

                  if( data.notify == "Success" ){

                    Object.keys(data.upload_data).forEach(function(key) {
                        res.push(data.upload_data[key]);
                    });

                    //aa = res.join(",");
                    console.log(res);

                  } else{

                    console.log(data.notify);

                  }                  

            },'json');


            $('#container').highcharts({
                chart: {
                    type: 'column',
                    margin: 75,
                    options3d: {
                        enabled: true,
                        alpha: 10,
                        beta: 25,
                        depth: 70
                    }
                },
                title: {
                    text: '3D chart with null values'
                },
                subtitle: {
                    text: 'Notice the difference between a 0 value and a null point'
                },
                plotOptions: {
                    column: {
                        depth: 25
                    }
                },
                xAxis: {
                    categories: Highcharts.getOptions().lang.shortMonths
                },
                yAxis: {
                    title: {
                        text: null
                    }
                },
                series: [{
                    name: 'Sales',
                    data: [res]
                }]
            });

        }

</script>

回应

Answer 1

series 属性的 data 部分/部分应该是一个数字数组。

根据您的解释，您的实现就像具有以下内容:

series: [{
    name: 'Sales',
    data: ['1, 2, 1, 0'] // this is an array with one string element, which is wrong
}]

但是，应该是:

series: [{
    name: 'Sales',
    data: [1, 2, 1, 0]
}]

参见JSfiddle demo here

编辑

除了我上面建议的更改之外，请考虑 $.post 调用是异步执行。然后，您应该仅在数据“准备好”时绘制图表，方法是在成功回调中移动 $('#container').highcharts(...) block ，如下所示:

if( data.notify == "Success" ){

    Object.keys(data.upload_data).forEach(function(key) {
        res.push(data.upload_data[key]);
    });

    $('#container').highcharts({
        ...
        ...
        series: [{
            name: 'Sales',
            data: res
        }]
    });

} else { 
    console.log(data.notify);
}