Highcharts 的基本使用 双y轴 以及数据的匹配问题
这就是我做出来的效果 以一个柱状图为例子 其他的图像 差不了多少 双y轴
//这就是js代码 在对应的jsp 文件中需要先引入相应的 Highcharts js文件
$('#Dscore_oilabnormal').highcharts({
chart: {
type: 'column'//这里的类型表示 柱状图
},
exporting:{ //这里配置图表的导出功能为false 没有配置的时候 图表的的右上方会有一个导出的按钮
enabled:false
},
credits : { //这里配置的是取消右下角 Highcharts版权连接 请允许我这么说
enabled : false
},
colors: [ //这里配置的是柱状图上那几根柱子应该是什么颜色的
'#CC3300',
'#666FF'
],
title: { //这里是图表标题
text: $.getBusinessField("sorceAbnormalOil", "HP010")
},
xAxis: { //X轴
categories:data.time //X轴数据
},
yAxis: [{ //这里注意了 配置双Y轴的这里要看好了 这里的值是一个数组
min: 0,
title:{ //左边y轴的标题
text :''
},
labels:{
formatter:function() {//在labels里可以配置formatter属性可以对y轴设置单位之类的个性化东西
return this.value+"L";//可以对照上面图表
}
}
},{
title:{ //这是第二天Y轴在右边
text :''
},
opposite:true//这个属性的作用是说 是否与第一条y轴相反 当然是true咯
}],
labels: {
rotation: -90,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif' }
},
series: [{ //这比较重要 设置X轴显示的柱状图数据的地方 也是一个数组
//可以看出这里设置了两个类型的柱
name:$.getBusinessField("totaloilabnormal", "HP010"),
data: data.abnormalOil, //这就是一种类型的柱状的数据 以此类推
yAxis : 0,
dataLabels: { //这个属性可以在柱子上显示的显示数值为多少
enabled: true,
rotation: 0,
color: '#000000',
align: 'right',
x: 4,
y: 10,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif',
textShadow: '0 0 3px black'
}
}
}, {
name: $.getBusinessField("averagescore", "HP010"),
data: data.driverScore,
yAxis : 1,
dataLabels: {
enabled: true,
rotation: 0,
color: '#000000',
align: 'right',
x: 4,
y: 10,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif',
textShadow: '0 0 3px black'
}
}
}]
});
数据根据自己的业务来处理 我的做法是后台返回一个map map里面放了 几个数据集合 每个数据集合分别对应相应的X轴数据 和图表柱状数据