欢迎使用CSDN-markdown编辑器

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 ，控制图例是否显示，及其位置， 均有可能影响图例的显示