Question

我尝试使用Highcharts创建图表。我的JSON输出是一种常规的JSON格式，由PHP的json_encode（）生成。这是我的JSON输出：

[["2015-07-13 16:41:05","3"],["2015-08-15 16:41:05","1"],["2015-09-18 16:41:05","4"],["2015-10-28 16:41:05","3"],["2015-11-20 16:41:05","1"],["2015-11-28 16:41:05","5"],["2015-12-13 16:41:05","1"],["2015-12-21 16:41:05","2"],["2015-12-24 16:41:05","1"],["2015-12-25 16:41:05","2"],["2015-12-28 16:41:05","1"],["2016-01-03 16:41:05","2"],["2016-01-09 16:41:05","4"],["2016-01-14 16:41:05","6"],["2016-01-17 16:41:05","3"],["2016-01-18 16:41:05","3"],["2016-01-20 16:41:05","2"],["2016-01-21 16:41:05","2"],["2016-01-22 16:41:05","2"],["2016-01-23 16:41:05","1"],["2016-01-24 16:41:05","5"],["2016-01-25 13:41:05","1"],["2016-01-25 16:41:00","1"],["2016-01-25 16:41:05","1"],["2016-01-27 16:41:05","1"],["2016-01-28 16:41:05","1"],["2016-01-29 16:41:05","1"],["2016-02-09 16:41:05","1"],["2016-02-10 16:41:05","2"],["2016-02-11 16:41:05","3"],["2016-02-15 16:41:05","2"],["2016-02-18 16:41:05","1"],["2016-02-21 16:41:05","1"],["2016-02-23 16:41:05","1"],["2016-02-24 16:41:05","1"],["2016-02-25 16:41:05","1"],["2016-02-26 16:41:05","1"],["2016-02-28 16:41:05","1"],["2016-03-01 16:41:05","1"],["2016-03-02 16:41:05","1"],["2016-03-05 16:41:05","1"],["2016-03-12 16:41:05","1"],["2016-03-21 16:41:05","1"],["2016-04-25 16:41:05","1"],["2016-05-05 16:41:05","2"],["2016-05-11 16:41:05","1"],["2016-05-12 16:41:05","1"],["2016-05-24 16:41:05","1"],["2016-05-25 16:41:05","1"],["2016-06-01 16:41:05","1"],["2016-06-12 16:41:05","1"],["2016-06-25 10:41:05","1"],["2016-06-25 16:41:05","1"],["2016-07-01 10:41:05","1"],["2016-07-01 16:41:05","1"],["2016-07-02 16:41:05","1"],["2016-07-25 16:21:05","1"],["2016-07-25 16:41:05","1"],["2016-08-13 16:41:05","1"],["2016-08-28 16:41:05","1"],["2016-09-20 16:41:05","3"],["2016-09-29 16:41:05","2"],["2016-10-01 14:20:18","1"],["2016-10-09 14:20:18","1"],["2016-10-10 14:20:18","1"],["2016-10-28 14:20:18","2"],["2016-10-30 14:20:18","2"],["2016-11-01 13:44:29","1"],["2016-11-06 08:26:18","2"],["2016-11-10 13:44:29","1"],["2016-11-13 13:44:29","2"],["2016-11-14 19:13:42","4"],["2016-11-15 23:27:39","3"],["2016-12-06 19:04:06","3"],["2016-12-08 10:49:28","3"],["2016-12-10 23:01:44","1"],["2016-12-14 21:27:44","1"],["2016-12-15 23:27:44","2"],["2016-12-15 23:27:53","3"],["2016-12-18 18:06:28","1"],["2016-12-21 20:06:28","3"],["2016-12-23 20:06:20","5"],["2016-12-29 20:18:18","3"],["2017-01-03 20:06:32","3"]]

但是Highcarts并没有在图表中加载数据。 URL，输出和数据都已设置。请求返回200，并且我可以定期加载数据，因为我已经通过AJAX检查了它。这是我的Highchart功能。请注意，我的申请表中有几份报告。这就是我指定cartFilling（）函数的原因：

function cartFilling() {
    var url = 'components/com_product/views/reports/callback.php?callback=cart-filling&date='+date_scope;
    jQuery.getJSON(url, function (data) {
        Highcharts.chart('cartFilling', {
            chart: {
                zoomType: 'x'
            },
            title: {
                text: 'Shopping Cart Filling Actions'
            },
            subtitle: {
                text: document.ontouchstart === undefined ?
                        'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
            },
            xAxis: {
                type: 'datetime'
            },
            yAxis: {
                title: {
                    text: 'Carts Filled'
                }
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                area: {
                    fillColor: {
                        linearGradient: {
                            x1: 0,
                            y1: 0,
                            x2: 0,
                            y2: 1
                        },
                        stops: [
                            [0, Highcharts.getOptions().colors[0]],
                            [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                        ]
                    },
                    marker: {
                        radius: 2
                    },
                    lineWidth: 1,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                    threshold: null
                }
            },

            series: [{
                type: 'area',
                name: 'Cart Filling',
                data: data
            }]
        });
    });
}

非常感谢任何帮助。

Answer 1

您的解决方案完美无缺，您只需要重写数据阵列。

而不是：

["2015-07-13 16:41:05", "3"]

使用此：

[Date.UTC(2015,6,13,16,41,5), 3]

请注意，在Date.UTC函数中，0 = 1月，1 = 2月等，

http://jsfiddle.net/dpegbt7t/

Highcarts不会加载我的JSON数据

1 个答案: