HighCharts -教程+例子

Highchart簡介：

 

 Highcharts是一款免費開源的純javascript編寫的圖表庫，能夠很簡單便捷的在Web網站或Web應用中添加交互性的圖表，

 Highcharts目前支持直線圖、曲線圖、面積圖、柱狀圖、餅圖、散點圖等多達18種不同類型的圖表，可以滿足你對Web圖表的任何需求 ！

Highcharts功能強大，圖表種類多也很漂亮，高度自定義，兼容性比較好。具體參考： http://www.hcharts.cn/docs/index.php?doc=start-introduction

 

使用准備：

1.在官網上找到下載鏈接即可，其中有3個下載項，highchart為主要的，后面兩個，highmaps是主題為地圖的一些圖表。highstock是主題為股票的一些折線圖，是一些行業定制化的工具

2.使用highchart需要兩個文件一個是基礎的jquery(jquery建議1.8.2版本)或者prototype等js框架，以及highcharts.js。可以在線引用，但是可能不太穩定，建議本地引用。

 

 

 需要在移動端使用的時候，考慮這個。另外圖表導出等高級功能，需要額外引入exporting.js 等文件。

 

HelloWorld

 1.創建div容器，圖表將在這個容器里畫出來，需要制定id，style長寬樣式需要制定。

   

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

2.先引入jquery.js，最好1.8.2版本；highchart.js，因為后者基於前者，所以順序不能顛倒。

3.使用script包含js代碼，記住 type="text/javascript" 需要指定，以免出問題。

4.寫代碼，代碼可以放在$(function(){    });中，也可以放在ajax的回調函數里，總之要保證執行到。

$('#container').highcharts({                   //圖表展示容器，與div的id保持一致
        chart: {
            type: 'column'                         //指定圖表的類型，默認是折線圖（line）
        },
        title: {
            text: 'My first Highcharts chart'      //指定圖表標題
        },
        xAxis: {
            categories: ['my', 'first', 'chart']   //指定x軸分組
        },
        yAxis: {
            title: {
                text: 'something'                  //指定y軸的標題
            }
        },
        series: [{                                 //指定數據列
            name: 'Jane',                          //數據列名
            data: [1, 0, 4]                        //數據
        }, {
            name: 'John',
            data: [5, 7, 3]
        }]
    });

highchart的代碼，都是json形式的，易於理解和開發，數據也可以用json來填充，下面舉個自己做的例子看一看。

+----------+----------------+----------+-------------+
| store_id | store_name     | dur_flow | statis_time |
+----------+----------------+----------+-------------+
|        1 | 上海虹橋店     |       12 | 9:00        |
|        2 | 上海虹橋店     |       32 | 10:00       |
|        4 | 上海虹橋店     |      122 | 11:00       |
|        5 | 上海虹橋店     |      192 | 12:00       |
|        6 | 上海虹橋店     |      325 | 13:00       |
|        7 | 上海浦東店     |       18 | 9:00        |
|        8 | 上海浦東店     |       38 | 10:00       |
|        9 | 上海浦東店     |       78 | 11:00       |
|       10 | 上海浦東店     |      158 | 12:00       |
|       11 | 上海浦東店     |      268 | 13:00       |
|       12 | 上海南京東路店 |        8 | 9:00        |
|       13 | 上海南京東路店 |       18 | 10:00       |
|       13 | 上海南京東路店 |       38 | 11:00       |
|       14 | 上海南京東路店 |      198 | 12:00       |
|       15 | 上海南京東路店 |      438 | 13:00       |
|       16 | 上海南京東路店 |      518 | 14:00       |
|       17 | 上海浦東店     |      398 | 14:00       |
|       18 | 上海虹橋店     |      418 | 14:00       |
+----------+----------------+----------+-------------+

//后台取的數據，一個List<TestChart>
List<TestChart> dat = testChartService.selectStorData();
System.out.println(dat.toString());
writeJson(response, dat);

$(function () {
        $.ajax({
            type: 'post',
            url: '<%=basePath%>storeData',
            async: true,
            cache: false,
            dataType: 'json',
            success: function (data) {
                /*這種方式可以，但是感覺多次一舉了*/
                /* var abc = [];
                 for(var i=0;i<data.length;i++){
                 var bcd={};
                 bcd.name=data[i].name;
                 bcd.data=data[i].data;
                 abc.push(bcd);
                 }*/
                /*這種方式盡管可以做到，但是毫無疑問太麻煩了！*/
                /*取店名(如果col里已經有店名了，就不在放進去，實現去重)*/
                var col = [];
                for (var i = 0; i < data.length; i++) {
                    if (col.indexOf(data[i].storeName) > -1) {
                        continue;
                    }
                    col.push(data[i].storeName);
                }
                /*取時間段，同理*/
                var xcate=[];
                for (var i = 0; i < data.length; i++) {
                    if (xcate.indexOf(data[i].statisTime) > -1) {
                        continue;
                    }
                    xcate.push(data[i].statisTime);
                }
                /*循環取出每個店的所有數據，分店存儲為對象，再添加到一個array中，充當series的內容*/
                var alldat=[];
                for (var j = 0; j < col.length; j++) {
                    var each={};
                    var singledat = [];
                    for (var i = 0; i < data.length; i++) {
                        if (data[i].storeName == col[j]) {
                            singledat.push(data[i].durFlow);
                        }
                    }
                    each.name=col[j];
                    each.data=singledat;
                    alldat.push(each);
                }
                console.log(alldat);
                $('#container').highcharts({
                    chart: {
                        //type=bar為柱圖,type=line為線圖
                        type: 'bar',
                        borderRadius: 6,
                        borderColor: '#4572A7',
                        backgroundColor: '#EEEEEE    '
                    },
                    title: {
                        text: 'Historic World Population by Region'
                    },
                    subtitle: {
                        text: 'Source: Wikipedia.org'
                    },
                    xAxis: {
                        categories: xcate,
                        title: {
                            text: null
                        }
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'Population (millions)',
                            align: 'high'
                        },
                        labels: {
                            overflow: 'justify'
                        }
                    },
                    tooltip: {
                        valueSuffix: ' millions'
                    },
                    plotOptions: {
                        bar: {
                            dataLabels: {
                                enabled: true
                            }
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'top',
                        x: -40,
                        y: 100,
                        floating: true,
                        borderWidth: 1,
                        backgroundColor: '#FFFFFF',
                        shadow: true
                    },
                    credits: {
                        enabled: false
                    },
                    series: alldat
                });
            }
        });
    });

通過上面的一系列做法可以實現根據后台數據生成圖表，但是過程比較麻煩，后面再尋求簡化的辦法。

----未完待續