HighCharts -教程+例子

浪尽此生 提交于 2020-01-01 21:33:50
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
                });
            }
        });
    });

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

----未完待续

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!