在 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 类型设置为类别。

Answer 2

我确信有更好的方法来实现这个目标，但是下面的代码可以实现所需的输出，所以我现在就使用它！可能会帮助其他人，因为我的搜索在网上找不到类似的东西！

<script>
$(function () {
    $('#30daycontainer').highcharts({
        chart: {
            type: 'areaspline'
        },
        title: {
            text: '30 Day Traffic Stats'
        },
        subtitle: {
            text: ''
        },

        xAxis: {
            type: 'datetime'
        },


        yAxis: {
            allowDecimals: false,
            title: {
                text: 'Page Traffic Stats'
            },
            labels: {
                formatter: function () {
                    return this.value + ' Visitors';
                }
            }
        },
        tooltip: {
            shared: true,
            crosshairs: true,
        },
        plotOptions: {
            area: {
                           stacking: 'percent',
                lineColor: '#888888',
                lineWidth: 1,
                marker: {
                    enabled: false,
                    symbol: 'circle',
                    lineWidth: 2,
                    radius: 4,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
            },
            areaspline: {
                fillOpacity: 0.5
            }
        },

        credits: {
          enabled: false
        },

        series: [{
            name: 'Unique Visitors',
            data: <?php echo $chartData['uniquepageviews']; ?>,
            pointStart: Date.UTC(<?php echo $chartData['startdate']; ?>),
            pointInterval: 24 * 3600 * 1000 // one day
        },{
            name: 'Page Views',
            data: <?php echo $chartData['pageViews']; ?>,
            pointStart: Date.UTC(<?php echo $chartData['startdate']; ?>),
            pointInterval: 24 * 3600 * 1000 // one day
            },

        ]

    });
});
</script>

有很多小的变化，但最大的变化是 xAxis 到这个......

xAxis: {
    type: 'datetime'
},

还在我的Series 中添加了pointStart 和pointInterval

series: [{
    name: 'Unique Visitors',
    data: <?php echo $chartData['uniquepageviews']; ?>,
    pointStart: Date.UTC(<?php echo $chartData['startdate']; ?>),
    pointInterval: 24 * 3600 * 1000 // one day
},{
    name: 'Page Views',
    data: <?php echo $chartData['pageViews']; ?>,
    pointStart: Date.UTC(<?php echo $chartData['startdate']; ?>),
    pointInterval: 24 * 3600 * 1000 // one day
    },
]