Highchart是Javascript做图表中非常好的第三方类库,效果非常炫,而且很容易上手,关于Highchart的具体用法和API参考,Highchart中文网有很详细的介绍,而且范例很多,提供在线测试代码,这是我自己写的,两个图的参数,给定参数,再加一句代码图表就出来了,留下备查
(1)仪表图
var gaugeoptions = {
chart: {
renderTo: 'gaugediv',
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0, //绘图区边框宽度
plotShadow: false, //绘图区阴影
spacingTop:5,
},
title: {
text: false,
},
pane: {
startAngle: -150,
endAngle: 150,
background:[],
},
// the value axis
yAxis: {
min: 0,
max: 500,
minorTickInterval: 50,
minorTickWidth: 0,
tickWidth: 0,
tickInterval: 50,
tickPosition: 'inside',
labels: {
distance: 5,
rotation: 'auto',
style: {
color: '#6D869F',
}
},
plotBands: [{
from: 0,
to: 50,
color: '#00E400'
}, {
from: 51,
to: 100,
color: '#FFFF00'
}, {
from: 101,
to: 150,
color: '#FF7E00'
},
{
from: 151,
to: 200,
color: '#FF0000'
},
{
from: 201,
to: 300,
color: '#99004C'
},
{
from: 300,
to: 500,
color: '#7E0023'
}]
},
plotOptions: {
gauge: {
dataLabels: {
borderWidth:0,
useHTML:true,
color: backcolor,
format: '{y}',
style: {
font: '800 18px "微软雅黑",arial,"宋体"',
}
},
dial: {
radius: '100%'
}
}
},
series: [],
credits: {
enabled: false,
},
point: {
color: '#7E0023'
}
};
var columnchartoptions = {
chart:{
renderTo: 'detail',
type: 'column',
width: 370,
height:200,
},
title: {
text: '',
style: {
font: '800 10px "微软雅黑",arial,"宋体"',
}
},
xAxis: {
categories: [],
style: {
font: '800 10px "微软雅黑",arial,"宋体"',
}
},
yAxis: {
min: 0,
title: {
text: '值 (μg/m³)'
}
},
tooltip: {
headerFormat: '{point.key}',
pointFormat: '{series.name}: ' +
'{point.y:.1f} μg/m³ ',
footerFormat: '
',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
},
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
highlight(this.category);
}
}
}
}
},
credits: {
enabled: false,
},
legend: {
margin:5,
symbolHeight:6,
symbolWidth: 10,
verticalAlign: "bottom",
padding:4,
},
};
再加一个图表的点击事件,柱状图的参数里已经有了,返回this.category,就是当前点击柱子对应的x轴的categories,this.x是返回当前柱子在x轴中序号(1、2、3.。。)this.y就是y值了。