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

通过上面的一系列做法可以实现根据后台数据生成图表，但是过程比较麻烦，后面再寻求简化的办法。

----未完待续