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