HighCharts 折线图，柱形图，饼图实现

我在此为大家展示常见的折线图，柱形图，饼图 的实现过程；

—-把数据做成活的就是把数据转换成人家的格式，下面就是具体的实现步骤，若有更好的转换方式请留言。

*声明：其中含有自己的业务逻辑，已经标注其中，自己根据需求查看。
发现问题，遇到问题可以直接指出！希望在此可以帮助大家，给大家提供便利，让大家共同进步~*

1.折线图：
首先从后台获取数据：

@ResponseBody
@RequestMapping("chars")
//获取数据
public void chars(HttpServletResponse response) throws IOException{

    //查询出数据
    List<Publish> publishList = hospitalRegisterService.getpublishList();

    //转成JSON 传到前台
    response.getWriter().print(JSONArray.fromObject(publishList).toString();
}

//定义全局变量
var number = "";
var time = "";
var data = "";
var data1 = "";
var t = "";

//通过ajax  接收值
$.ajax({
    //异步提交（自己查看异步提交和同步提交的不同，这里不做详解）
    async:false,
    type:"post",
    url:"chars.action",
    dataType:"json",
    success:function(s){
    //循环赋值
        for(i in s){
             time += s[i].publish_time+","
             number += s[i].publish_number+",";
            } 
        }
    });
    //展示的数据  需要用eval解析
    data1 = eval("["+number.substring(0,number.length - 1)+"]");
    //横坐标
    data = time.substring(0,time.length - 1);
    t = data.split(","); 

//折线图
$('#container').highcharts({
      //标题
      title: {
           text: 'Monthly Average Temperature',
           x: -20 //center
       },
       //副标题
       subtitle: {
           text: 'Source: WorldClimate.com',
           x: -20
       },
       //横坐标
       xAxis: {
       //这里是上面的转成的数据
           categories: t
       },
       //纵坐标
        yAxis: {
            title: {
            //单位
                text: 'Temperature (°C)'
            },
            plotLines:[{
            color:'red',            //线的颜色，定义为红色
            dashStyle:'longdashdot',//标示线的样式，默认是solid（实线），这里定义为长虚线
            value:3,                //定义在哪个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线
            width:2                 //标示线的宽度，2px
        }]
        },
        //显示框
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {//方框所在的位置
            layout: 'vertical',
            align: 'right',//程度标的目标地位
            verticalAlign: 'middle',//垂直标的目标地位
            borderWidth: 0 //边框大小
            x: 0， //间隔x轴的间隔
　　          y: 0 //间隔Y轴的间隔
        },
        //数据源（这里只展示一条数据）
        series: [{
            name: 'Tokyo',
            data: data1
        }]
    });

2.柱形图：

柱形图和折线图几乎是一样的！！！

从后台获取值也一样

@ResponseBody
@RequestMapping("chars")
//获取数据
public void chars(HttpServletResponse response) throws IOException{

    //查询出数据
    List<Publish> publishList = hospitalRegisterService.getpublishList();

//转成JSON 传到前台
    response.getWriter().print(JSONArray.fromObject(publishList).toString();
}
//定义全局变量
var number = "";
var data = "";
var data1 = "";

//通过ajax  接收值
$.ajax({
    //异步提交（自己查看异步提交和同步提交的不同，这里不做详解）
    async:false,
    type:"post",
    url:"chars.action",
    dataType:"json",
    success:function(s){
        //循环赋值
        for(i in s){
             number += s[i].publish_number+",";
            } 
        }
    });
    //展示的数据  需要用eval解析
    data1 = eval("["+number.substring(0,number.length - 1)+"]");


//柱形图
 var chart = new Highcharts.Chart({
      chart: {//图表区选项
           renderTo: 'container',//图表放置的容器
           type: 'column',//图表哦类型
           options3d: {
               enabled: true,
               alpha: 15,
               beta: 15,
               depth: 50,
               viewDistance: 25
           }
       },
        title: {//标题选项
            text: 'Chart rotation demo'
        },
        subtitle: {//副标题选项
            text: 'Test options by dragging the sliders below'
        },
        plotOptions: {//数据点选项
            column: {       
                depth: 25
            },      
        },
         xAxis: {//x轴选项

            //默认月份
            categories:Highcharts.getOptions().lang.shortMonths
        },
         yAxis: {//y轴选项
            title: {
                text: null
            }
        },
        series: [{//数据列选项
            data:data1

        }]
    });

3.饼图：
饼图和折线图 ，柱形图不太相同。
首先把要显示的数据封装一个bean：

public class HighChar {

    private String publish_time;

    private Integer publish_number;

    public String getPublish_time() {
        return publish_time;
    }

    public void setPublish_time(String publish_time) {
        this.publish_time = publish_time;
    }

    public Integer getPublish_number() {
        return publish_number;
    }

    public void setPublish_number(Integer publish_number) {
        this.publish_number = publish_number;
    }

   //构造方法
    public HighChar(String publish_time, Integer publish_number) {
        super();
        this.publish_time = publish_time;
        this.publish_number = publish_number;
    }

}

从后台获取数据

@ResponseBody
@RequestMapping("chars")
public List<HighChar> chars(HttpServletResponse response) throws IOException{

    //查询数据
    List<Publish> publishList = hospitalRegisterService.getpublishList();

    //定义一个List集合
    List<HighChar> resultList = new ArrayList<HighChar>();
    //将查询出来的数据存入List集合
    for (Publish publish : publishList) {
        resultList.add(new HighChar(publish.getPublish_time(),publish.getPublish_number()));
    }

    //返回的是一个集合
    return resultList;
}

前台代码

//定义 chart
 var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            //常规图表选项设置
            chart: {
                renderTo: 'container',        //在哪个区域呈现，对应HTML中的一个元素ID
                plotBackgroundColor: null,    //绘图区的背景颜色
                plotBorderWidth: null,        //绘图区边框宽度
                plotShadow: false            //绘图区是否显示阴影            
            },

            //图表的主标题
            title: {
                text: '医院预约量'
            },
            //当鼠标经过时的提示设置
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                percentageDecimals: 1
            },
            //每种图表类型属性设置
            plotOptions: {
                //饼状图
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        formatter: function() {
                            //Highcharts.numberFormat(this.percentage,2)格式化数字，保留2位精度
                            return '<b>'+ this.point.name +'</b>: '+Highcharts.numberFormat(this.percentage,2) +' %';
                        }
                    }
                }
            },
               //图表要展现的数据
            series: [{
                type: 'pie',
                name: '预约量'
            }]
        });
    });

$(function(){
//ajax获取数据
     $.ajax({
        type:"get",
        url:'chars.action',//提供数据的请求路径
        dataType:"json",
        success:function(data){
          //定义数组
            var array = [];
            //循环存入数组
            $.each(data,function(i,d){
                array.push([d.publish_time,d.publish_number]);
            });
           //chart 的数据源赋值
            chart.series[0].setData(array); 

        },
        //错误后的回调函数
        error:function(e){
            alert(e);
        }
    }); 

});

4.饼图 前台也可以拼接字符串转换成格式

//定义
 var chart2;  
    $(document).ready(function() {
        //异步请求数据
        $.ajax({
            async:false,
            type:"post",
           url:'dayAccount.do',//提供数据的Servlet
           dataType:"json",
           success:function(data){
            var array = "";
            $.each(data,function(i,d){
                array = array + "{name:'"+d.typename+"',y:"+d.count+"},"
            });
               array = array.substring(0, array.length-1);

               chart2 = "["+array+"]";
               //调用下面的方法
               dochart(chart2)
           }
       });     
    });

    function dochart(chart2){
            var value = " [{type: 'pie',name: '市场份额',data:"+chart2+"}]";
            value = eval(value);
          chart = new Highcharts.Chart({
              //常规图表选项设置
              chart: {
                  renderTo: 'container',        //在哪个区域呈现，对应HTML中的一个元素ID
                  plotBackgroundColor: null,    //绘图区的背景颜色
                  plotBorderWidth: null,        //绘图区边框宽度
                  plotShadow: false            //绘图区是否显示阴影            
              },

              //图表的主标题
              title: {
                  text: '2012年10月份浏览器市场份额'
              },
              //当鼠标经过时的提示设置
              tooltip: {
                  pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                  percentageDecimals: 1
              },
              //每种图表类型属性设置
              plotOptions: {
                  //饼状图
                  pie: {
                      allowPointSelect: true,
                      cursor: 'pointer',
                      dataLabels: {
                      enabled: true,
                      color: '#000000',
                      connectorColor: '#000000',
                      formatter: function() {
                              //Highcharts.numberFormat(this.percentage,2)格式化数字，保留2位精度
                              return '<b>'+ this.point.name +'</b>: '+Highcharts.numberFormat(this.percentage,2) +' %';
                          }
                      }
                  }
              },
                 //图表要展现的数据
                 series:  value
             });
    }