javascript - 在 Highcharts.js 上显示 Google Analytics 30 天流量

Question

我正在构建一个自定义 WordPress Google Analytics 插件，它将向网站上的每个页面添加一个 /stats 页面。它将使用 Google Analytics API 提取数据并显示多种不同的统计信息。

其中一个统计数据是过去 30 天的页面访问者，我想使用 HighCharts.js 将其显示在图表/图形上

我做了一个演示并尽我所能对其进行了修改，使其尽可能接近我需要的内容，但我现在需要帮助。

<小时/>

这是 30 天的数据以及每天的访客数量。这个 JavaScript 数组需要用来填充图表上的数据......

我的 PHP 代码将其输出到我的 JavaScript 代码中需要它的页面上...

[
    ["Dec 15", 1],
    ["Dec 16", 0],
    ["Dec 17", 0],
    ["Dec 18", 0],
    ["Dec 19", 0],
    ["Dec 20", 0],
    ["Dec 21", 0],
    ["Dec 22", 0],
    ["Dec 23", 0],
    ["Dec 24", 0],
    ["Dec 25", 1],
    ["Dec 26", 0],
    ["Dec 27", 0],
    ["Dec 28", 0],
    ["Dec 29", 2],
    ["Dec 30", 0],
    ["Dec 31", 0],
    ["Jan 1", 0],
    ["Jan 2", 0],
    ["Jan 3", 0],
    ["Jan 4", 0],
    ["Jan 5", 0],
    ["Jan 6", 0],
    ["Jan 7", 0],
    ["Jan 8", 0],
    ["Jan 9", 1],
    ["Jan 10", 0],
    ["Jan 11", 0],
    ["Jan 12", 1],
    ["Jan 13", 1],
]

<小时/>

下面的演示代码最大的问题是底部的 x 轴。需要将其更改为显示过去 30 天的天数/日期。垂直 Y 轴显示已设置的访客数量。

下面是迄今为止我从演示中获得的代码......

JSFiddle 演示页面 - http://jsfiddle.net/g3550h7m/

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'area'
        },
        title: {
            text: '30 Day Traffic Stats'
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            allowDecimals: false,
            labels: {
                formatter: function () {
                    return this.value; // clean, unformatted number for year
                }
            }
        },
        yAxis: {
            title: {
                text: 'Page Traffic Stats'
            },
            labels: {
                formatter: function () {
                    return this.value + ' Visitors';
                }
            }
        },
        tooltip: {
            pointFormat: '{series.name} <b>{point.y:,.0f}</b><br/>on {point.x}'
        },
        plotOptions: {
            area: {
                pointStart: '15',
                marker: {
                    enabled: false,
                    symbol: 'circle',
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
            }
        },
        series: [{
            name: 'Page Visits',
            data: [
    ["Dec 15", 1],
    ["Dec 16", 0],
    ["Dec 17", 0],
    ["Dec 18", 0],
    ["Dec 19", 0],
    ["Dec 20", 0],
    ["Dec 21", 0],
    ["Dec 22", 0],
    ["Dec 23", 0],
    ["Dec 24", 0],
    ["Dec 25", 1],
    ["Dec 26", 0],
    ["Dec 27", 0],
    ["Dec 28", 0],
    ["Dec 29", 2],
    ["Dec 30", 0],
    ["Dec 31", 0],
    ["Jan 1", 0],
    ["Jan 2", 0],
    ["Jan 3", 0],
    ["Jan 4", 0],
    ["Jan 5", 0],
    ["Jan 6", 0],
    ["Jan 7", 0],
    ["Jan 8", 0],
    ["Jan 9", 1],
    ["Jan 10", 0],
    ["Jan 11", 0],
    ["Jan 12", 1],
    ["Jan 13", 1],
    ]
        }]
    });
});

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Answer 1

问题是您的数据包含不正确的 x 值，它应该是数字或时间戳(对于您拥有的数字 xAxis 类型)，而不是字符串。要将日期转换为时间戳，您可以使用 Date.UTC()/Date.parse()。第二种解决方案是将xAxis类型设置为类别。