highchar 

做后台数据统计表的，设定一个定时器 每天凌晨去抓取当天的活跃数据，然后以ArrayJSON
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>****</title>

        <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
        <script type="text/javascript">
        $(function() {
            Highcharts.setOptions({
                global: {
                    useUTC: false
                },
                lang: {
                    months: ['一月', '二月', '三月', '四月', '五月', '六月',  '七月', '八月', '九月', '十月', '十一月', '十二月'],
                    weekdays: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
                    shortMonths:['一月', '二月', '三月', '四月', '五月', '六月',  '七月', '八月', '九月', '十月', '十一月', '十二月']
                }
            });
            // 每天活跃用户 
            $.getJSON('json/data.json',    function(data) {
                // Create the chart
                $('#container').highcharts('StockChart', {
                    

                    rangeSelector : {
                        selected : 1
                    },

                    title: {
                        text : '****'
                    },
                    
                    subtitle: {
                        text : 'vstarcam'
                    },
                    xAxis: {
                        tickPixelInterval: 150,//x轴上的间隔 
                        type: 'datetime', //定义x轴上日期的显示格式 
                        labels: {
                            formatter: function() {
                                var vDate=new Date(this.value);
                                return vDate.getFullYear()+"-"+(vDate.getMonth()+1)+"-"+vDate.getDate();
                            }
                        },
                        align: 'center'
                    },
                    yAxis: {
                        tickPixelInterval: 10,//Y轴上的间隔 
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: 'silver'
                        }]
                    },
                    
                    tooltip: {
                        valueDecimals: 0,    // 有效小数位 
                        xDateFormat: '%Y-%m-%d, %A'//鼠标移动到趋势线上时显示的日期格式  
                    },
                    credits: {
                        enabled: false,
                        text: "xxxx",
                        href: "http://www.xxxx.com",
                        style: {
                          cursor: "pointer",
                          color: "#909090",
                          fontSize: "10px"
                        }
                   },
                   exporting: {
                       filename: '导出的图片名称'
                   },
                   rangeSelector: {
                        buttons: [{//定义一组buttons,下标从0开始 
                            type: 'week',
                            count: 1,
                            text: '一周'
                        },{
                            type: 'month',
                            count: 1,
                            text: '一月'
                        },{
                            type: 'month',
                            count: 3,
                            text: '三月'
                        },{
                            type: 'month',
                            count: 6,
                            text: '半年'
                        },{
                            type: 'year',
                            count: 1,
                            text: '一年'
                        },{
                            type: 'all',
                            text: '所有'
                        }
                        ]
                    },
                    series : [{
                        name : '活跃用户',
                        data : data,
                        tooltip: {
                            valueDecimals: 0
                        }
                    }]
                });
            });
    </head>
    <body>
<script src="js/highstock.js"></script>
<script src="js/modules/exporting.js"></script>

<div id="container" style="height: 800px; min-width: 500px"></div>

    </body>
</html>

posted on 2014-08-08 16:48  Love I Smile  阅读(462)  评论(1)    收藏  举报