使用HIGHCHARTS绘制服务端返回数据曲线图

1. HIGHCHARTS 是什么？

   Highcharts是一个使用纯JavaScript编写的绘图工具，它提供了简单的方式为你的网页或者Web应用添加交互式图表。

   Highcharts目前支持的交互式图表类型如下：

   • line -> 直线图
   • spline -> 曲线图
   • area -> 面积图
   • areaspline -> 曲线面积图
   • arearange -> 面积范围图
   • areasplinerange -> 曲线面积范围图
   • column -> 柱状图
   • columnrange -> 柱状范围图
   • bar -> 条形图
   • pie -> 饼图
   • scatter -> 散点图
   • boxplot -> 箱线图
   • bubble -> 气泡图
   • errorbar -> 误差线图
   • funnel -> 漏斗图
   • gauge -> 仪表图
   • waterfall -> 瀑布图
   • polar -> 雷达图

   • pyramid -> 金字塔

     各个类型的表现形式请参考官方demo

2. 下载

   官方下载

3. 配置

   配置

Highcharts可以读取cvs、xml、json等格式的文件数据。还可以访问数据库的数据进行绘图。若有需要可以参考官方文档.这里不做详解。

文章题目的应用场景如下：前端向服务器发起请求，服务器给前端返回Json格式数据，Highcharts将这些数据绘制成曲线图。最后得到的曲线示例图如下：

根据曲线图我们知道需要的数据有：

• 数据所代表的含义。如用户，视频等

• 每项类型的数据量。如7480、2175等。

  则前端通过ajax访问PHP后台返回的数据格式就很明确了。如下所示，这里不方便展示后端代码。

{
    array[用户,视频...]
    array{
        用户 => 7480
        ...
    }
}
      

前端访问后台和绘图代码如下：

function initIncrementData(lastDays) {
        var increment = {
            chart:{
                renderTo: 'increment',//曲线图所在div的id
                type: 'spline'//类型
            },
            title: {//名称
                text: '数据增量趋势图'
            },
            subtitle: {//子名称
                text: '数据新增量随时间的关系图'
            },
            xAxis: {//x轴
                type: 'datetime',
                dateTimeLabelFormats: {
                    day: '%e. %b'
                },
                labels: {
                    align: 'center'
                },
                title: {
                    text: '时间'
                }
            },
            yAxis: {//y轴
                title: {
                    text: '新增数'
                },
                min: 
            },
            tooltip: {//数据窗口
                shared: true
            },
            series: []//数据
        };
        var ld = ;
        if(!lastDays) {
            ld = ;
        }else {
            ld = lastDays;
        }
        var now = new Date();
        var lt = now.getTime() - (ld-) *  *  *  * ;
        var lastTime = new Date();       
        lastTime.setTime(lt);
        var year = lastTime.getFullYear();
        var day = lastTime.getDate();
        var month = lastTime.getMonth();
        var intervalDay = ld *  * ;
        $.ajax({
            type : 'POST',
            url : "getData",
            data : {
                "lastDays" : ld
            },
            dataType : "json",
            success : function(data, textStatus, jqXHR) {
                console.log(data);
                var array = data.result;
                var keys = array[];
                var datas = array[];
                for(var i = ; i < keys.length; i++) {
                    var names = keys[i];
                    var ds = datas[i];
                    var serie = {"name": names, "data": ds, "pointStart": Date.UTC(year, month, day), "pointInterval": intervalDay};
                    console.log("name： " + names + ";data: " + ds);
                    increment.series.push(serie);
                }
                increment.subtitle.text = "过去" + ld + "天内的数据增量随时间的关系图"
                new Highcharts.Chart(increment);
                console.log(increment.series);
            }
        });     
    }