Highcharts Gauge（仪表盘）是一种用于展示单一值的图表，通常用于仪表盘或监控面板。
以下是一个简单的示例，展示如何使用 Highcharts 创建一个基本的仪表盘：
Highcharts.chart('container', {
chart: {
type: 'gauge'
},
title: {
text: '速度仪表盘'
},
yAxis: {
min: 0,
max: 200,
plotBands: [
{
from: 0,
to: 100,
color: '#55BF3B' // green
},
{
from: 100,
to: 150,
color: '#DDDF0D' // yellow
},
{
from: 150,
to: 200,
color: '#DF5353' // red
}
]
},
series: [{
name: '速度',
data: [80] // 示例数据
}]
});
在这个示例中：
chart.type设置为'gauge'，表示这是一个仪表盘。yAxis定义了仪表盘的最小值和最大值，以及不同颜色的区间（plotBands）。series中的数据表示当前的值。
你可以根据需要调整 title、yAxis 和 series 中的数据。
附：以下是Highcharts官方8个仪表盘演示代码：
// ============================================================
// 1. Default gauge — shows what you get out of the box.
// New defaults: arc background, labels outside, modern dial.
// ============================================================
Highcharts.chart('gauge-01', {
chart: { type: 'gauge' },
title: { text: 'Default look' },
yAxis: {
min: 0,
max: 100,
plotBands: [
{ from: 0, to: 50, color: '#55BF3B' },
{ from: 50, to: 75, color: '#DDDF0D' },
{ from: 75, to: 100, color: '#DF5353' }
]
},
series: [
{
name: 'Score',
data: [68],
tooltip: { valueSuffix: ' / 100' }
}
],
credits: { enabled: false }
});
// ============================================================
// 2. Rounded pane — pane.borderRadius: '50%' rounds the arc
// ends. Grid lines splits up the arc into segments.
// ============================================================
Highcharts.chart('gauge-02', {
chart: { type: 'gauge' },
title: { text: 'Rounded ends' },
pane: {
innerSize: '75%',
borderRadius: '50%'
},
yAxis: {
min: 0,
max: 100,
gridLineWidth: 1,
gridLineColor: 'var(--highcharts-background-color)',
tickWidth: 0,
minorTickWidth: 0,
plotBands: [
{ from: 0, to: 60, color: '#85c1e9' }, // light blue
{ from: 60, to: 80, color: '#2980b9' }, // blue
{ from: 80, to: 100, color: '#1a5276' } // dark blue
]
},
series: [
{
name: 'Score',
data: [72],
tooltip: { valueSuffix: ' / 100' },
// Slim elongated needle — long reach, barely any width,
// large flat disc pivot that anchors it visually.
dial: {
radius: '80%',
backgroundColor: '#2980b9',
baseWidth: '5%',
topWidth: '1%',
rearLength: '0%',
borderRadius: '50%'
},
pivot: {
radius: '5%',
backgroundColor: '#2980b9',
borderWidth: 0
}
}
],
credits: { enabled: false }
});
// ============================================================
// 3. Thin ring of plot bands inside the pane. Visible axis
// line and ticks on the outside.
// ============================================================
Highcharts.chart('gauge-03', {
chart: { type: 'gauge' },
title: { text: 'Thin ring' },
pane: {
borderRadius: '50%',
background: null,
margin: 20
},
yAxis: {
labels: {
distance: '20%'
},
lineWidth: 1,
min: 0,
max: 100,
offset: 0,
tickPosition: 'outside',
minorTickPosition: 'outside',
plotBands: [
// light purple
{
from: 0,
to: 70,
color: '#d2b4de',
outerRadius: '90%',
innerRadius: '80%'
},
// deep purple
{
from: 70,
to: 100,
color: '#8e44ad',
outerRadius: '90%',
innerRadius: '80%'
}
]
},
plotOptions: {
gauge: {
dial: {
baseWidth: 6
}
}
},
series: [
{
name: 'Score',
data: [45],
tooltip: { valueSuffix: ' / 100' }
}
],
credits: { enabled: false }
});
// ============================================================
// 4. Wide semicircle — classic dashboard gauge.
// Explicit startAngle / endAngle; labels outside by default.
// ============================================================
Highcharts.chart('gauge-04', {
chart: { type: 'gauge', height: '100%' },
title: { text: 'Semicircle' },
pane: {
startAngle: -90,
endAngle: 90,
borderRadius: '50%'
},
yAxis: {
min: 0,
max: 200,
labels: { distance: 20 },
plotBands: [
{ from: 0, to: 120, color: '#f0b429' }, // amber
{ from: 120, to: 160, color: '#e07b39' }, // orange
{ from: 160, to: 200, color: '#c0392b' } // deep red
]
},
series: [
{
name: 'Speed',
data: [110],
tooltip: { valueSuffix: ' km/h' },
dataLabels: { format: '{y} km/h' },
// Broad spade — wide base that narrows sharply to a fine
// tip; sits low for a classic speedometer look.
dial: {
radius: '80%',
baseWidth: '12%',
topWidth: '1%',
baseLength: '15%',
rearLength: '0%',
borderRadius: '4%',
backgroundColor: '#c0392b'
},
pivot: {
radius: '5%',
backgroundColor: '#c0392b',
borderWidth: 0
}
}
],
credits: { enabled: false }
});
// ============================================================
// 5. Custom pivot — big hollowed pivot, short dial radius.
// Demonstrates pivot.radius as percentage + hollow border.
// ============================================================
Highcharts.chart('gauge-05', {
chart: { type: 'gauge' },
title: { text: 'Custom pivot' },
pane: {
startAngle: -150,
endAngle: 150,
innerSize: '70%',
borderRadius: 0
},
yAxis: {
min: 0,
max: 100,
tickWidth: 0,
minorTickWidth: 0,
plotBands: [
{ from: 0, to: 60, color: '#76d7c4' }, // light teal
{ from: 60, to: 100, color: '#148f77' } // deep teal
]
},
plotOptions: {
gauge: {
dataLabels: {
verticalAlign: 'middle',
y: 0,
zIndex: 3,
style: {
color: 'light-dark(#148f77, #76d7c4)',
textOutline: 'none'
}
},
dial: {
radius: '60%',
backgroundColor: 'light-dark(#148f77, #76d7c4)',
baseLength: '70%',
baseWidth: '60%',
borderRadius: 0,
topWidth: 0
},
pivot: {
radius: '50%',
borderWidth: 5,
borderColor: 'light-dark(#148f77, #76d7c4)',
backgroundColor: 'var(--highcharts-background-color)'
}
}
},
series: [
{
name: 'Score',
data: [78],
tooltip: { valueSuffix: ' / 100' }
}
],
credits: { enabled: false }
});
// ============================================================
// 6. Gauge + solidgauge combo — dial on top of a solid fill.
// Both share the same pane; solidgauge carries the threshold.
// ============================================================
Highcharts.chart('gauge-06', {
chart: { height: '100%' },
title: { text: 'Combo' },
pane: {
borderRadius: '50%'
},
yAxis: {
min: 0,
max: 100,
stops: [
[0.3, '#1abc9c'], // teal
[0.6, '#2980b9'], // blue
[0.9, '#8e44ad'] // purple
]
},
plotOptions: {
gauge: {
// Hair-line needle: zero base width, pointed tip,
// full length — the solid fill does all the visual work.
dial: {
radius: '80%',
baseWidth: '1%',
topWidth: '1%',
rearLength: 0,
borderRadius: 0,
backgroundColor: 'var(--highcharts-neutral-color-100)'
}
}
},
series: [
{
type: 'solidgauge',
name: 'Target',
data: [60],
dataLabels: { enabled: false }
},
{
type: 'gauge',
name: 'Actual',
data: [74]
}
],
credits: { enabled: false }
});
// ============================================================
// 7. Solid semicircle — fuel/battery style.
// innerSize on the pane drives the hollow; stop colors.
// ============================================================
Highcharts.chart('gauge-07', {
chart: { type: 'solidgauge', height: '80%' },
title: { text: 'Fuel level' },
pane: {
startAngle: -90,
endAngle: 90,
innerSize: '60%'
},
tooltip: { enabled: false },
yAxis: {
min: 0,
max: 100,
stops: [
[0.1, '#DF5353'],
[0.5, '#DDDF0D'],
[0.9, '#55BF3B']
],
tickAmount: 2,
title: { text: 'Fuel', y: -60 }
},
plotOptions: {
solidgauge: {
dataLabels: {
format: '{y}%',
style: {
fontSize: '1.4em',
fontWeight: 'bold'
},
y: -8
}
}
},
series: [{ name: 'Fuel', data: [64] }],
credits: { enabled: false }
});
// ============================================================
// 8. Full-circle ring — single ring activity gauge.
// pane.startAngle 0 → 360; rounded ends; subtitle label.
// ============================================================
Highcharts.chart('gauge-08', {
chart: { type: 'solidgauge', height: '100%' },
title: { text: 'Activity' },
pane: {
startAngle: 0,
endAngle: 360,
innerSize: '75%',
margin: 0
},
tooltip: { enabled: false },
yAxis: { min: 0, max: 100, lineWidth: 0, tickPositions: [] },
series: [
{
name: 'Steps',
data: [
{
color: {
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
stops: [
[0, '#e91e8c'],
[1, '#ff6b6b']
]
},
y: 79
}
],
dataLabels: {
format:
'{y}%<br><span style="font-size:0.8em;color:#888">' + 'steps</span>'
},
rounded: true
}
],
credits: { enabled: false }
});
// ============================================================
// 9. Multi-ring KPI — three concentric solidgauge rings.
// Each ring is a series; pane.background provides tracks.
// Updated percentages to match new pane defaults (no 112%).
// ============================================================
Highcharts.chart('gauge-09', {
chart: { type: 'solidgauge', height: '100%' },
title: { text: 'KPI Overview' },
tooltip: {
backgroundColor: 'none',
borderWidth: 0,
shadow: false,
pointFormat:
'<span style="color:{point.color};font-weight:bold">' +
'{series.name}: {point.y}%</span>'
},
pane: {
startAngle: 0,
endAngle: 360,
margin: 0,
background: [
{
outerRadius: '100%',
innerRadius: '78%',
backgroundColor: `color-mix(
in srgb,
var(--highcharts-color-0) 25%,
transparent
)`,
borderWidth: 0
},
{
outerRadius: '77%',
innerRadius: '56%',
backgroundColor: `color-mix(
in srgb,
var(--highcharts-color-1) 25%,
transparent
)`,
borderWidth: 0
},
{
outerRadius: '55%',
innerRadius: '34%',
backgroundColor: `color-mix(
in srgb,
var(--highcharts-color-2) 25%,
transparent
)`,
borderWidth: 0
}
]
},
yAxis: { min: 0, max: 100, lineWidth: 0, tickPositions: [] },
plotOptions: {
solidgauge: {
dataLabels: { enabled: false },
linecap: 'round',
rounded: true
}
},
series: [
{
name: 'Conversion',
data: [
{
color: 'var(--highcharts-color-0)',
radius: '100%',
innerRadius: '78%',
y: 82
}
]
},
{
name: 'Engagement',
data: [
{
color: 'var(--highcharts-color-1)',
radius: '77%',
innerRadius: '56%',
y: 59
}
]
},
{
name: 'Retention',
data: [
{
color: 'var(--highcharts-color-2)',
radius: '55%',
innerRadius: '34%',
y: 71
}
]
}
],
credits: { enabled: false }
});
// ============================================================
// 10. Wide arc, individual corner radius for plot bands
// ============================================================
Highcharts.chart('gauge-10', {
chart: { type: 'gauge' },
title: { text: 'Rounded bands' },
pane: {
startAngle: -150,
endAngle: 150,
background: null,
borderRadius: '25%'
},
yAxis: {
min: 0,
max: 100,
plotBands: [
{
from: 0,
to: 50,
color: '#a9cce3', // pale blue
borderWidth: 1,
borderColor: 'var(--highcharts-background-color)',
borderRadius: {
radius: 4,
scope: 'individual',
where: 'all'
}
},
{
from: 50,
to: 75,
color: '#5dade2', // sky blue
borderWidth: 1,
borderColor: 'var(--highcharts-background-color)',
borderRadius: {
radius: 4,
scope: 'individual',
where: 'all'
}
},
{
from: 75,
to: 100,
color: '#8e44ad', // violet
borderWidth: 1,
borderColor: 'var(--highcharts-background-color)',
borderRadius: {
radius: 4,
scope: 'individual',
where: 'all'
}
}
]
},
series: [
{
name: 'Value',
data: [55],
tooltip: { valueSuffix: ' / 100' }
}
],
credits: { enabled: false }
});
// ============================================================
// 11. Solid gauge with threshold — negative range, below zero
// turns red. Uses the new `threshold: 0` default behavior.
// ============================================================
Highcharts.chart('gauge-11', {
chart: { type: 'solidgauge' },
title: { text: 'Threshold' },
pane: {
borderRadius: 0,
innerSize: '80%'
},
tooltip: { enabled: false },
yAxis: {
min: -4,
max: 4,
tickAmount: 2,
stops: [
[0.4999, '#DF5353'],
[0.5, '#55BF3B']
],
title: { text: 'Loss/Gain', y: 20 },
plotLines: [
{
value: 0,
color: 'var(--highcharts-neutral-color-100)',
width: 2,
zIndex: 5
}
]
},
series: [
{
name: 'Loss/Gain',
data: [-1.2],
threshold: 0,
dataLabels: {
style: {
fontSize: '1.2em',
fontWeight: 'bold'
}
},
tooltip: { valueSuffix: ' %' }
}
],
credits: { enabled: false }
});
// ============================================================
// 12. Custom dial path — a circular dot instead of a needle.
// Demonstrates dial.path for fully custom dial shapes.
// ============================================================
Highcharts.chart('gauge-12', {
chart: { type: 'gauge' },
title: { text: 'Custom dial' },
pane: {
startAngle: -120,
endAngle: 120,
innerSize: 160,
borderRadius: '50%',
size: 180
},
yAxis: {
min: 0,
max: 100,
tickWidth: 0,
minorTickWidth: 0,
labels: { style: { color: '#fff', fontWeight: 'bold' } }
},
series: [
{
type: 'solidgauge',
data: [75],
enableMouseTracking: false
},
{
name: 'Value',
data: [
{
className: 'linked-to-primary',
y: 75
}
],
tooltip: { valueSuffix: ' / 100' },
dial: {
// A small dot that travels along the ring
path: [
['M', 78, 0],
['a', 6, 6, 0, 1, 1, 12, 12],
['a', 6, 6, 0, 1, 1, -12, -12]
],
backgroundColor: 'var(--highcharts-background-color)',
borderColor: 'var(--highcharts-color-0)',
borderWidth: 5,
radius: '100%'
},
pivot: { radius: 0 },
dataLabels: {
verticalAlign: 'middle',
y: 0
}
}
],
credits: { enabled: false }
});
// Add some life to all gauges
setInterval(() => {
Highcharts.charts.forEach(chart => {
chart?.series.forEach(series => {
series.points.forEach(point => {
const { max = 0, min = 0 } = point.series.yAxis;
const newVal = Math.round(
(point.y || 0) + (Math.random() - 0.5) * (max - min) * 0.2
);
point.update(Math.max(min, Math.min(max, newVal)), false);
if (point.options.className === 'linked-to-primary') {
point.update(chart.series[0].points[0].y, false);
}
});
});
chart?.redraw();
});
}, 2000);
