使用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);
            }
        });     
    }