如何实现HighCharts双向Solidgauge（-100%至100%）？

嘿，这需求完全可以用Highcharts来实现！我给你写了一个完整的示例，完美匹配你要的双向Solid Gauge效果——以0%为共同端点向两侧延伸，负侧使用红到黄的渐变，正侧使用黄到绿的渐变，还包含了从中心指向数值点的指针，而且是静态图表，仅在页面刷新时更新数据。

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
    <title>双向Solid Gauge仪表盘</title>
    <!-- 引入Highcharts及SolidGauge模块 -->
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/highcharts-more.js"></script>
    <script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
    <style>
        #gauge-container {
            width: 400px;
            height: 300px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="gauge-container"></div>

    <script>
        // 页面加载时初始化图表
        document.addEventListener('DOMContentLoaded', function() {
            // 这里可以从后端或其他地方获取数据，页面刷新时更新
            const currentValue = 60; // 示例正向值，可替换为-40等负向值

            Highcharts.chart('gauge-container', {
                chart: {
                    type: 'solidgauge',
                    backgroundColor: 'transparent'
                },
                title: {
                    text: '双向仪表盘',
                    style: {
                        fontSize: '18px'
                    }
                },
                tooltip: {
                    enabled: true,
                    formatter: function() {
                        return `<b>当前值:</b> ${this.y}%`;
                    }
                },
                pane: {
                    startAngle: -90,
                    endAngle: 90,
                    background: [{
                        outerRadius: '100%',
                        innerRadius: '0%',
                        backgroundColor: Highcharts.color('#EEE')
                            .setOpacity(0.3)
                            .get(),
                        borderWidth: 0
                    }]
                },
                yAxis: {
                    min: -100,
                    max: 100,
                    lineWidth: 0,
                    tickPositions: [],
                    title: {
                        text: '百分比',
                        y: 70
                    }
                },
                series: [
                    // 负向区间（0%至-100%）
                    {
                        name: '负向',
                        data: [Math.min(currentValue, 0)],
                        color: {
                            linearGradient: { x1: 1, y1: 0, x2: 0, y2: 0 },
                            stops: [
                                [0, '#FFFF00'], // 0%处为黄色
                                [1, '#FF0000']  // -100%处为纯红色
                            ]
                        },
                        radius: '100%',
                        innerRadius: '0%',
                        startAngle: -90,
                        endAngle: 0
                    },
                    // 正向区间（0%至100%）
                    {
                        name: '正向',
                        data: [Math.max(currentValue, 0)],
                        color: {
                            linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
                            stops: [
                                [0, '#FFFF00'], // 0%处为黄色
                                [1, '#00FF00']  // 100%处为纯绿色
                            ]
                        },
                        radius: '100%',
                        innerRadius: '0%',
                        startAngle: 0,
                        endAngle: 90
                    },
                    // 指针数据系列
                    {
                        name: '指针',
                        data: [currentValue],
                        type: 'gauge',
                        dial: {
                            radius: '85%',
                            baseWidth: 4,
                            baseLength: '10%',
                            rearLength: '0%'
                        },
                        pivot: {
                            radius: 6
                        }
                    }
                ]
            });
        });
    </script>
</body>
</html>

关键配置说明 #

• 双向区间拆分：用两个solidgauge系列分别处理负向（-100%至0%）和正向（0%至100%）区间，通过startAngle和endAngle设置各自的弧形范围，确保0%为共同端点。
• 渐变颜色配置：负向系列使用从黄色到红色的水平渐变，正向系列使用从黄色到绿色的水平渐变，完美匹配你要的颜色过渡效果。
• 指针实现：额外添加一个gauge类型的系列来实现从中心穿过弧形末端的指针，通过dial和pivot配置指针的样式和尺寸。
• 静态更新：只需在页面加载时修改currentValue的值（可以从后端接口获取），页面刷新时图表就会自动更新为最新数据。

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