如何使用Highcharts创建如图所示的自定义仪表盘图表？

要实现目标样式的自定义仪表盘，你可以基于Highcharts的gauge图表类型，通过调整核心配置项来定义分段颜色、指针样式、刻度与背景效果，以下是完整的可运行实现代码：

<!DOCTYPE html>
<html>
<head>
    <title>自定义Highcharts仪表盘</title>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/highcharts-more.js"></script>
</head>
<body>
    <div id="container" style="width: 400px; height: 300px;"></div>

    <script>
        Highcharts.chart('container', {
            chart: {
                type: 'gauge',
                plotBackgroundColor: null,
                plotBackgroundImage: null,
                plotBorderWidth: 0,
                plotShadow: false
            },
            title: {
                text: '自定义仪表盘'
            },
            pane: {
                startAngle: -150,
                endAngle: 150,
                background: [{
                    backgroundColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                        stops: [[0, '#FFF'], [1, '#333']]
                    },
                    borderWidth: 0,
                    outerRadius: '109%'
                }, {
                    backgroundColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                        stops: [[0, '#333'], [1, '#FFF']]
                    },
                    borderWidth: 1,
                    outerRadius: '107%'
                }, {
                    backgroundColor: '#DDD',
                    borderWidth: 0,
                    outerRadius: '105%',
                    innerRadius: '103%'
                }]
            },
            yAxis: {
                min: 0,
                max: 100,
                minorTickInterval: 'auto',
                minorTickWidth: 1,
                minorTickLength: 10,
                minorTickPosition: 'inside',
                minorTickColor: '#666',
                tickPixelInterval: 30,
                tickWidth: 2,
                tickPosition: 'inside',
                tickLength: 10,
                tickColor: '#666',
                labels: {
                    step: 2,
                    rotation: 'auto'
                },
                title: {
                    text: '数值'
                },
                plotBands: [{
                    from: 0,
                    to: 30,
                    color: '#55BF3B' // 绿色区间
                }, {
                    from: 30,
                    to: 70,
                    color: '#DDDF0D' // 黄色区间
                }, {
                    from: 70,
                    to: 100,
                    color: '#DF5353' // 红色区间
                }]
            },
            series: [{
                name: '数值',
                data: [65],
                tooltip: {
                    valueSuffix: ' %'
                },
                dial: {
                    backgroundColor: 'black',
                    baseWidth: 8,
                    baseLength: '95%',
                    radius: '80%',
                    topWidth: 3
                },
                pivot: {
                    backgroundColor: 'black',
                    radius: 6
                }
            }]
        });
    </script>
</body>
</html>

核心配置说明 #

• pane：通过startAngle和endAngle定义仪表盘的弧度范围，多层背景配置模拟边框层次感。
• yAxis.plotBands：设置不同数值区间的背景色，对应目标图中的绿、黄、红分段。
• series.dial：自定义指针的宽度、长度、颜色，匹配目标样式的指针形态。
• series.pivot：调整指针中心圆点的大小与颜色。
• yAxis.labels/ticks：优化刻度与标签的显示位置、尺寸，提升可读性。

你可以根据需求修改区间数值、颜色参数、仪表盘尺寸或角度，快速适配目标效果。

内容的提问来源于stack exchange，提问作者narasimhareddy969