Highcharts Ajax Json不显示图表答案

【问题标题】：Highcharts Ajax Json not displaying ChartHighcharts Ajax Json不显示图表
【发布时间】：2016-10-14 03:45:29
【问题描述】：

我正在尝试使用 ajax 折线图并创建了以下内容，但它没有显示任何内容。

我想要实现的是显示过去 30 天的页面浏览量。因此我的 Json 编码显示 [日期，页面浏览量]

我希望日期水平显示在底部，页数显示在垂直轴上。

当我加载页面时，没有错误，但它显示为空白。

更新：我已经更新了 JSON 数据，但我不明白它需要按什么样的顺序排序，因为现在的数据是 [A,B] 并且我按 A 的升序对其进行了排序。

{“数据”：[[1476374400000,143],[1476288000000,190],[1476201600000,108],[1476115200000,145],[1476028800000,125],[14759424000000,6005],60015 ，[1475769600000,26]，[1475683200000,31]，[1475596800000,42]，[14755510400000,19]，[147542400000000,34]，[1475424000000,34] 1475078400000,34]，[1474992000000,33]，[1474905600000,39]，[1474819200000,52]，[1474732800000,47]，[1474732800000,47] 51],[1474300800000,70],[1474214400000,69],[1474128000000,64],[1474041600000,45],[1473955200000,47],[1473868800000,44]],"name":"example.com "}

然后按照 highcharts 网站上的代码，我得到了这个。

<head>

    <script
        src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/data.src.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>

    <!-- Additional files for the Highslide popup effect -->
    <!-- Additional files for the Highslide popup effect -->
    <script src="https://www.highcharts.com/samples/static/highslide-full.min.js"></script>
    <script src="https://www.highcharts.com/samples/static/highslide.config.js" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="https://www.highcharts.com/samples/static/highslide.css"/>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>


<script type="text/javascript">
    $(document).ready(function () {

// Get the CSV and create the chart
        $.getJSON('https://www.micro.sg/json/', function (data) {

            $('#container').highcharts({

                data: {
                    json: data
                },

                title: {
                    text: 'Daily visits at www.highcharts.com'
                },

                subtitle: {
                    text: 'Source: Google Analytics'
                },

                xAxis: {
                    tickInterval: 24 * 3600 * 1000, // one week
                    tickWidth: 0,
                    gridLineWidth: 1,
                    labels: {
                        align: 'left',
                        x: 3,
                        y: -3
                    }
                },

                yAxis: [{ // left y axis
                    title: {
                        text: null
                    },
                    labels: {
                        align: 'left',
                        x: 3,
                        y: 16,
                        format: '{value:.,0f}'
                    },
                    showFirstLabel: false
                }, { // right y axis
                    linkedTo: 0,
                    gridLineWidth: 0,
                    opposite: true,
                    title: {
                        text: null
                    },
                    labels: {
                        align: 'right',
                        x: -3,
                        y: 16,
                        format: '{value:.,0f}'
                    },
                    showFirstLabel: false
                }],

                legend: {
                    align: 'left',
                    verticalAlign: 'top',
                    y: 20,
                    floating: true,
                    borderWidth: 0
                },

                tooltip: {
                    shared: true,
                    crosshairs: true
                },

                plotOptions: {
                    series: {
                        cursor: 'pointer',
                        point: {
                            events: {
                                click: function (e) {
                                    hs.htmlExpand(null, {
                                        pageOrigin: {
                                            x: e.pageX || e.clientX,
                                            y: e.pageY || e.clientY
                                        },
                                        headingText: this.series.name,
                                        maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) + ':<br/> ' +
                                        this.y + ' visits',
                                        width: 200
                                    });
                                }
                            }
                        },
                        marker: {
                            lineWidth: 1
                        }
                    }
                },

                series: [{
                    name: 'All visits',
                    lineWidth: 4,
                    marker: {
                        radius: 4
                    }
                }, {
                    name: 'New visitors'
                }]
            });
        });

    });
</script>
</body>

【问题讨论】：

标签： javascript highcharts

【解决方案1】：

您的代码中有两个问题。第一件事是你不必使用数据模块来加载 json - 实际上它对数据没有任何作用 - 所以你的图表是空的。您应该将数据放入系列属性 - 记住一件事，它需要数组，而不是对象，所以在这种情况下它应该是这样的（这样的选项包括 3 个系列，其中 2 个没有数据）：

series: [series, {
      name: 'All visits',
      lineWidth: 4,
      marker: {
        radius: 4
      },
    }, {
      name: 'New visitors'
    }]

另一个问题是数据需要排序。最好的方法是在服务器端执行此操作，当然，您可以在浏览器中对其进行排序。

  series.data.sort(function (a, b) {
    return a[0]-b[0];
  });

示例：http://jsfiddle.net/ojg90mmg/1/

【讨论】：

谢谢你的回答我把它整理好了，但是我不清楚整理数组。请参阅有关我的新 json 数据的问题的更新。
我使用的是PHP，所以如果在我从mysql生成JSON数据时可以对其进行整理，我将只从服务器端进行。