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

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

—-未完待续

版权声明：本文为opensesame原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/opensesame/p/5722821.html