我一直在使用highchart来图形显示我的记录。 HighChart在我的php变量中使用逗号分隔值可以很好地工作。但是,我无法使用带有逗号分隔值的javascript变量来完成此操作。请帮我解决一下这个。非常感谢您的帮助。谢谢。我的代码如下所示。

Java脚本

 <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的值似乎正确,但是图表从未显示图形。这是什么问题?

javascript - 具有逗号分隔值的Javascript变量在HighChart中不起作用-LMLPHP

修改

<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>


响应

javascript - 具有逗号分隔值的Javascript变量在HighChart中不起作用-LMLPHP

最佳答案

data属性的series部分/节应为数字数组。

根据您的解释,您的实现就像您将具有以下功能:

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(...)块,以便在数据“就绪”时绘制图表,如下所示:

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);
}

关于javascript - 具有逗号分隔值的Javascript变量在HighChart中不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32216655/

10-11 08:01