以下是一个使用Highcharts库创建不规则间隔的仪表盘的示例代码:
// 创建数据数组
var data = [
[0, 10],
[10, 20],
[20, 30],
[30, 50],
[50, 70],
[70, 90],
[90, 100]
];
// 创建仪表盘配置
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// 仪表盘的刻度线和标签
yAxis: {
stops: [
[0.1, '#55BF3B'], // 绿色
[0.5, '#DDDF0D'], // 黄色
[0.9, '#DF5353'] // 红色
],
lineWidth: 0,
minorTickInterval: null,
tickAmount: 2,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
// 创建仪表盘
var chart = Highcharts.chart('container', Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 100,
title: {
text: 'Speed'
}
},
credits: {
enabled: false
},
series: [{
name: 'Speed',
data: data,
dataLabels: {
format: '{y}
' +
'km/h'
},
tooltip: {
valueSuffix: ' km/h'
}
}]
}));
// 更新仪表盘的数据
function updateGaugeData(newData) {
chart.series[0].setData(newData);
}
// 示例用法
var newData = [
[0, 30],
[30, 60],
[60, 80],
[80, 90],
[90, 95],
[95, 100]
];
updateGaugeData(newData);
你可以将上述代码保存为一个HTML文件,并在浏览器中打开它,以查看不规则间隔的仪表盘。
上一篇:不规则间隔的热力图
下一篇:不规则间隔分割PDF文件