淘先锋技术网

首页 1 2 3 4 5 6 7

JQuery JSGauges是一个基于JQuery的可视化数据展示工具,能够帮助开发者快速地创建各种形式的图标和仪表盘,同时支持响应式布局,适应多种设备。

$(function(){
$('#gauge').JSGauge({
height: 300,
width: 300,
gaugeRanges: [{
startValue: 0,
endValue: 40,
rangeOptions: {
fillStyle: '#ff0000',
strokeStyle: '#ff0000'
}
}, {
startValue: 40,
endValue: 70,
rangeOptions: {
fillStyle: '#ff9900',
strokeStyle: '#ff9900'
}
}, {
startValue: 70,
endValue: 100,
rangeOptions: {
fillStyle: '#33cc33',
strokeStyle: '#33cc33'
}
}],
gaugeValue: 80,
gaugeValueText: '80%',
font: '15px Arial',
gaugeTitle: 'JSGauge',
gaugeTitleFont: 'bold 20px Arial',
animateOnInit: true
});
});

以上代码创建了一个高度为300像素,宽度为300像素的仪表盘,其刻度范围被划分为三段,分别用不同的颜色填充。仪表盘显示的当前值为80,同时显示对应的百分比文本。仪表上方显示了一个标题,字体为粗体,大小为20像素。

JSGauges支持多种不同类型的仪表盘,包括圆形、半圆形、水平条和垂直条。其具有高度的自定义性和扩展性,可以通过自定义数值范围、颜色和动画效果等属性来满足各种需求。