欢迎使用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 :
4000
'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
b247
+ '/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');
}
}
});

注意：