欢迎使用CSDN-markdown编辑器

来源：互联网发布：mysql update表关联编辑：程序博客网时间：2024/06/17 06:55

highCharts饼状图、柱状图、曲线图使用注意事项

首先，引入jquery及highCharts库

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script src="http://code.highcharts.com/highcharts.js"></script>

饼状图

$(function() {         $.ajax({           async : false,  //不异步         type : 'POST',           url : bsc.contextPath + '/biz/biz_tjfx!doNotNeedSecurity_StudentCjyc.action',          data :{"queryParam.areaCode" : "<%=qh%>", "queryParam.nd" : "<%=xn%>", "queryParam.flag" : "<%=flag%>" },         dataType : 'json',           success : function(data) {              var len = data.rows.length;                var flag = <%=flag%>;                var title = '' ;                if(flag == 1){                    title = '学生';                }else if(flag == 2){                    title = '小学生';                }if(flag == 3){                    title = '初中生';                }                //饼图                $('#pieCharts').highcharts({                  chart: {                      plotBackgroundColor: null,                      plotBorderWidth: 1,//null,//设置边框                      plotShadow: false                  },                credits : {                    enabled:false//不显示highCharts版权信息                },                  title: {                      text: title+'常见异常疾患占比图'                },                  tooltip: {  //鼠标停留的提示框                     pointFormat: '<b>{point.y}</b><br/><b>{point.percentage:.1f}%</b>'                  },                  plotOptions: {                      pie: {                          allowPointSelect: true,                          cursor: 'pointer',                          dataLabels: {                              enabled: true,                               format: '<b>{point.name}</b>: {point.percentage:.1f} %',                               style: {                                  color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'                              }                          } ,                      showInLegend: true  //显示图例                    }                },                 legend: {  //图例                    enabled: true,                          layout: 'vertical',     //图例内容布局方式                    align: 'right',         //图例在图表中的对齐方式，有 “left”, "center", "right" 可选                    floating : true,                    width: 150,                    x:-20,                    y:30,                    verticalAlign: 'top',                    borderWidth: 2,                    itemStyle : {'fontSize' : '10px'},                    //labelFormat:'{point.name}',                     labelFormatter: function() {                        return this.name+":"+this.percentage.toFixed(1)+"%";                    }                 },                  series: [{  //数据                    type: 'pie',//类型饼图                      name: '',//鼠标移动到饼图时显示的名字                      data: [                              ['视力低下',   data.rows[len-1].sldxsum],                            ['营养不良',   data.rows[len-1].yyblsum],                            {                                name: '肥胖超重',                                y: data.rows[len-1].fpczsum,                                sliced: true,                                selected: true                            },                            ['龋齿',  data.rows[len-1].qcjcsum],                            ['沙眼、结膜炎',  data.rows[len-1].seyesum],                            ['肝功能异常',   data.rows[len-1].liversum],                            ['结核菌素',   data.rows[len-1].jhjsum],                            ['扁桃体肿大',   data.rows[len-1].tonsilsum],                            ['色觉异常',   data.rows[len-1].eyecolorsum],                            ['甲状腺肿大',   data.rows[len-1].thyroidsum]                    ]                  }]            });

柱状图

$('#columnCharts').highcharts({                /* chart: {                      plotBackgroundColor: null,                      plotBorderWidth: 1,//null,//设置边框                      plotShadow: false                  }, */                chart: {                    type: 'column',                    plotBorderWidth: 1//null,//设置边框                  },                title: {                    text: title+'常见异常柱状图'                },                 xAxis: {                    categories: ['视力低下','营养不良','肥胖','龋齿','沙眼','肝功能异常','结核菌素','扁桃体肿大','色觉异常','甲状腺肿大'],                    dataLabels: {                              enabled: true,                               format: '<b>{point.name}</b>',                               style: {                                  color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'                              }                          } ,                     crosshair: true                },                 yAxis: {                    min: 0,                    title: {                        text: '人/次'                    }                },                 tooltip: {                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',                    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +                    '<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',                    footerFormat: '</table>',                    shared: true,                    useHTML: true                },                plotOptions: {                    column: {                        pointPadding: 0.2,                        borderWidth: 0,                        showInLegend: true                    }                },                legend: { //设置图例                       layout: 'vertical',                      align: 'right',                      verticalAlign: 'top',                      x: -30,                                   y: 40,                      floating: true,                      borderWidth: 1,                      backgroundColor: '#FFFFFF',                      shadow: true                  },                credits : {                    enabled:false//不显示highCharts版权信息                },                 series: [{                    name: '男',                    data: [data.rows[0].sldxsum,data.rows[0].yyblsum, data.rows[0].fpczsum, data.rows[0].qcjcsum, data.rows[0].seyesum,                     data.rows[0].liversum, data.rows[0].jhjsum, data.rows[0].tonsilsum, data.rows[0].eyecolorsum, data.rows[0].thyroidsum]                }, {                    name: '女',                    data: [data.rows[1].sldxsum, data.rows[1].yyblsum, data.rows[1].fpczsum, data.rows[1].qcjcsum, data.rows[1].seyesum,                     data.rows[1].liversum, data.rows[1].jhjsum, data.rows[1].tonsilsum, data.rows[1].eyecolorsum, data.rows[1].thyroidsum]                }]            });###曲线图$.ajax({              async : false,               type : 'POST',             url : bsc.contextPath + '/biz/biz_tjfx!doNotNeedSecurity_StudentSldxZk.action',              data : bsc.serializeObject($('#searchForm')),             dataType : 'json',                success : function(data) {              debugger;                 var len = data.rows.length;                if(len > 0){                 $('#lineCharts').highcharts({                     credits : {                        enabled:false//不显示highCharts版权信息                    },                      title: {                          text: $('#xn').combobox('getValue')+'年度'+txt+'视力低下趋势图'                    },                    chart: {                          plotBorderWidth: 1//null,//设置边框                      },                    xAxis: {                      categories: ['小学', '初中']                    },                     yAxis :{                        title: {                           text: ''                        },                        plotLines: [{                           value: 0,                           width: 1,                           color: '#808080'                         }]                    },                    tooltip :{                        valueSuffix: ''                        //valueSuffix: '\xB0C'                    },                    legend : {                        layout: 'vertical',                        align: 'right',                        verticalAlign: 'top',                        x: -30,                                       y: 40,                          floating: true,                          borderWidth: 2                    },                    series : [                        {                             name: '男',                             data: [data.rows[0].sldxsum, data.rows[2].sldxsum]                          },                           {                             name: '女',                             data: [data.rows[1].sldxsum, data.rows[3].sldxsum]                          }                    ]                });                }else{                    $('#lineCharts').css('display','none');                 }             }         });

注意：

1.饼图注意 showInLegend: true ，控制图例是否显示，及其位置，均有可能影响图例的显示

0 0