仪表盘:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="width: 600px; height: 300px; margin: 0 auto"></div>
js代码:
$(function () {
var colors = ['#07FD04','#FFFF00','#FF7805','#FA0100','#9E004F','#790222']
$('#container').highcharts({
chart :{
renderTo: 'container',
type: 'gauge',
plotBorderWidth: 1,
plotBackgroundColor: {//背景色
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF4C6'],
[0.3, '#FFFFFF'],
[1, '#FFF4C6']
]
},
plotBackgroundImage: null,//背景图片
height: 210
},
title : {
text: '北京市最近24小时空气质量指数趋势(AQI)'
},
pane : [{
startAngle: -90,
endAngle: 90,
background: null,
center: ['45%', '100%'],
size: 300
}],
yAxis : [{
// tickLength:0,
// minorTickLength:0,
min: 0,
max: 500,
minorTickPosition: 'inside',
tickPosition: 'inside',
labels: {
// enabled:false,
rotation: 'auto',
distance: 10
},
plotBands: [{//分区段
from: 0,
to: 50,
color: colors[0],
innerRadius: '100%',
outerRadius: '65%'
},{
from: 50,
to: 100,
color: colors[1],
innerRadius: '100%',
outerRadius: '65%'
},{
from: 100,
to: 150,
color: colors[2],
innerRadius: '100%',
outerRadius: '65%'
},{
from: 150,
to: 200,
color: colors[3],
innerRadius: '100%',
outerRadius: '65%'
},{
from: 200,
to: 300,
color: colors[4],
innerRadius: '100%',
outerRadius: '65%'
},{
from: 300,
to: 500,
color: colors[5],
innerRadius: '100%',
outerRadius: '65%'
}],
title: {
text: 'AQI',
style :{
fontSize : '14px',
marginTop : '10px'
},
y: 20
}
}],
exporting :{
enabled: true
},
plotOptions: {
gauge: {
dataLabels: {
enabled: true,
y : -20
},
dial: {//仪表盘指针
radius: '80%',
rearLength: '0%',
backgroundColor: 'silver',
borderColor: 'silver',
borderWidth: 1,
baseWidth: 10,
topWidth: 1,
baseLength: '30%'
}
}
},
tooltip :{
formatter: function() {
var name = '';
if(this.y >= 0 && this.y <=50)
name = "优";
else if(this.y > 50 && this.y <= 100)
name = "良";
else if (this.y > 100 && this.y <=150)
name = "轻度污染";
else if(this.y > 150 && this.y <= 200)
name = "中度污染";
else if(this.y > 200 && this.y <= 300)
name = "重度污染";
else if(this.y > 300)
name = "严重污染";
return '北京市最近24小时空气质量指数趋势(AQI): '+ this.y + ", 空气质量状况:" + name;
}
},
series: [{
name : '北京市最近24小时空气质量指数趋势(AQI)',
data: [150],
yAxis: 0
}]
});
});
分享到:
相关推荐
highcharts-more.js 文件 可用于制作仪表盘等 highcharts-more.js 文件 可用于制作仪表盘等 highcharts-more.js 文件 可用于制作仪表盘等 highcharts-more.js 文件 可用于制作仪表盘等
highcharts 动态生成柱状图,曲线图,仪表盘图,调用totalReport方法,传入要生成图表的类型 和数据参数 标题等 可以自动生成图
漂亮的highchart仪表盘
使用highchars所做的仪表盘图实例,包含所需的js文件
本代码为通过highcharts制作的双盘双指针仪表盘; 本代码为通过highcharts制作的双盘双指针仪表盘;
实在没法发到博客里了,太长了。提供给大家下载。封装类里有两个方法。
Highcharts是一个制作图表的纯Javascript类库, 主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone、IE和火狐等等; 对个人用户完全免费; 纯JS,无BS; 支持大部分的图表类型:直线图,曲线图...
•跨语言:不管是PHP、Asp.net还是Java都可以使用,它只需要三个文件:一个是Highcharts的核心文件highcharts.js,还有a canvas emulator for IE和Jquery类库或者MooTools类库; •提示功能:鼠标移动到图表的某一点...
联心菜市场数据中心是一个基于大数据和人工智能技术的...大屏通常使用HTML、CSS和JavaScript等技术来构建,同时结合使用可视化库和框架,如D3.js、Highcharts和Echarts等,以呈现各种图表、地图、仪表盘和指标卡等。
您可能感兴趣的文章:js canvas仿支付宝芝麻信用分仪表盘ECharts仪表盘实例代码(附源码下载)jquery插件canvaspercent.js实现百分比圆饼效果Javascript highcharts 饼图显示数量和百分比实例代码JavaS
电子商务门户希望构建一个实时分析仪表盘,对每分钟发货的订单数量做到可视化,从而优化物流的效率。解决方案之前,先快速看看我们将使用的工具:ApacheSpark–一个通用的大规模数据快速处理引擎。Spark的批处理速度...