Highcharts Solidgauge面板设为100%时颜色断裂问题求助

问题说明 #

在Highcharts的solidgauge图表中，将pane（面板）尺寸增大到100%时，图表特定区域出现颜色失真断裂的情况（如下图所示）。需要在保持面板尺寸为100%的前提下修复该问题。

用户当前使用的核心代码如下：

const options = {
  title: {
    text: null,
  },
  chart: {
    type: "solidgauge",
    backgroundColor: "transparent",
    plotBackgroundColor: null,
    plotBackgroundImage: null,
    plotBorderWidth: 0,
    plotShadow: false,
    width: 190,
    height: 190
  },
  tooltip: {
    enabled: false,
  },
  credits: {
    enabled: false,
  },
  pane: {
    startAngle: -140,
    endAngle: 140,
    background: [{
      backgroundColor: '0E1020',
      borderWidth: 0,
      innerRatius: '105%',
      outerRadius: '120%'
  }],
    center: ["50%", "50%"],
    size: "96%",
  },
  
  plotOptions: {
    series: {
      borderRadius: 20,
    },
    solidgauge: {
      rounded: true
    }
  },

  yAxis: {
    min: 0,
    max: 100,
    tickPixelInterval: 100,
    tickPosition: "inside",
    tickLength: 5,
    tickWidth: 0,
    minorTickInterval: 1,
    minorTickWidth: 1,
    minorTickLength: 3,
    minorTickPosition: 'inside',
    labels: {
      distance: -12,
      style: {
        fontSize: "10px",
        color: "#8A8FA8",
      },
    },
    lineWidth: 0,
  },

  series: [
    {
      name: "data",
      data: [{
                color: Highcharts.color('#083664')
                .setOpacity(0.3)
                .get(),
                radius: '120%',
                innerRadius: '105%',
                y: 100,
              },
              {
                color: '#12C283',
                radius: '120%',
                innerRadius: '105%',
                y: reliabilityAvg,
              },
              {
                color: '#BDCE57',
                radius: '120%',
                innerRadius: '105%',
                y: reliabilityAvg && reliabilityAvg < 76 ? reliabilityAvg : 75,
              },
              {
                color: '#E35B11',
                radius: '120%',
                innerRadius: '105%',
                y: reliabilityAvg && reliabilityAvg < 51 ? reliabilityAvg : 50,
              },
              {
                color: '#C62B3E',
                radius: '120%',
                innerRadius: '105%',
                y: reliabilityAvg && reliabilityAvg < 26 ? reliabilityAvg : 25,
              },
            ],
      dataLabels: {
        useHTML: true,
        format: `<span>${Math.round(reliabilityAvg as number)}</span><span style="font-size:0.4em; color: #A1A3B9">%</span>`,
        borderWidth: 0,
        color: "#FFFFFF",
        style: {
          fontSize: "40px",
          fontWeight: "bold"
        },
        y: -30
      },
      dial: {
        radius: "80%",
        backgroundColor: "#BEC0D1",
        borderWidth: 0,
        baseWidth: 10,
        baseLength: "60%",
        rearLength: "0%",
        topWidth: 1,
      },
      pivot: {
        backgroundColor: "gray",
        radius: 6,
      },
    },
  ],
};

解决方案 #

1. 修正pane配置的拼写错误 #

原代码中pane.background里的innerRatius是拼写错误，应为innerRadius；同时背景色'0E1020'缺少#前缀，会导致颜色渲染异常。修正后：

pane: {
  startAngle: -140,
  endAngle: 140,
  background: [{
    backgroundColor: '#0E1020',
    borderWidth: 0,
    innerRadius: '105%',
    outerRadius: '120%'
  }],
  center: ["50%", "50%"],
  size: "100%" // 设置为100%
}

2. 分离背景层与数据层 #

将背景透明层从主数据series中拆分出来，单独作为一个series，避免同series内多数据项叠加导致的裁剪问题：

series: [
  // 单独的背景层series
  {
    name: "background",
    data: [{
      color: Highcharts.color('#083664').setOpacity(0.3).get(),
      radius: '120%',
      innerRadius: '105%',
      y: 100
    }],
    dataLabels: { enabled: false },
    dial: { enabled: false },
    pivot: { enabled: false }
  },
  // 主数据与颜色分段series
  {
    name: "data",
    data: [
      { color: '#12C283', radius: '120%', innerRadius: '105%', y: reliabilityAvg },
      { color: '#BDCE57', radius: '120%', innerRadius: '105%', y: reliabilityAvg < 76 ? reliabilityAvg : 75 },
      { color: '#E35B11', radius: '120%', innerRadius: '105%', y: reliabilityAvg < 51 ? reliabilityAvg : 50 },
      { color: '#C62B3E', radius: '120%', innerRadius: '105%', y: reliabilityAvg < 26 ? reliabilityAvg : 25 }
    ],
    // 保留原有的dataLabels、dial、pivot配置
    dataLabels: {
      useHTML: true,
      format: `<span>${Math.round(reliabilityAvg as number)}</span><span style="font-size:0.4em; color: #A1A3B9">%</span>`,
      borderWidth: 0,
      color: "#FFFFFF",
      style: { fontSize: "40px", fontWeight: "bold" },
      y: -30
    },
    dial: {
      radius: "80%",
      backgroundColor: "#BEC0D1",
      borderWidth: 0,
      baseWidth: 10,
      baseLength: "60%",
      rearLength: "0%",
      topWidth: 1,
    },
    pivot: { backgroundColor: "gray", radius: 6 }
  }
]

3. 移除冲突的圆角配置 #

plotOptions.series.borderRadius与solidgauge.rounded同时使用会导致渲染冲突，移除前者：

plotOptions: {
  solidgauge: {
    rounded: true
  }
}

4. 优化yAxis刻度配置 #

原代码中minorTickInterval: 1会生成大量小刻度，增加渲染压力和精度误差，建议关闭或调整为合理间隔：

yAxis: {
  min: 0,
  max: 100,
  tickPixelInterval: 100,
  tickPosition: "inside",
  tickLength: 5,
  tickWidth: 0,
  minorTickInterval: null, // 关闭小刻度
  minorTickWidth: 0,
  minorTickLength: 0,
  minorTickPosition: 'inside',
  labels: {
    distance: -12,
    style: {
      fontSize: "10px",
      color: "#8A8FA8",
    },
  },
  lineWidth: 0,
}

效果说明 #

通过上述修改，既能将pane尺寸固定为100%，又能避免颜色断裂问题：

• 修正拼写错误确保背景层正确渲染
• 分离series避免叠加裁剪
• 移除冲突配置减少渲染异常
• 优化刻度配置提升渲染精度

内容的提问来源于stack exchange，提问作者조민택