Question

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

其中一个统计数据是过去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
    },
]

在Highcharts.js上显示Google Analytics（分析）30天流量

2 个答案: