如何在带有高图表的实心仪表上产生阴影

Question

我们正在使用多 kpi 仪表高图（实心仪表），这里我们面临背景边框阴影的问题。由于缺乏阴影效果，背景看起来非常透明。

我们需要一些这样的效果，但我们无法实现这个效果。

背景很亮，因此看起来没有任何痕迹。

Answer 1

不幸的是，与 Pie Solid Gauge 等其他系列不同，它没有可以定义阴影的阴影属性。

但是，您可以使用渲染函数来实现此目的，其中通过 SVGRenderer 生成 2 个圆圈：

Highcharts.chart('container', {
  chart: {
    ...
    events: {
      render: function() {
        const chart = this,
          center = chart.pane[0].center,
          x = chart.plotLeft + center[0],
          y = chart.plotTop + center[1],
          r = chart.pane[0].axis.axisGroup.element.getBBox().width / 2 - 1,
          smallestRadius = chart.series.reduce((minRadius, currentSeries) => {
            const currentRadius = parseInt(currentSeries.data[0].radius);
            return currentRadius < minRadius ? currentRadius : minRadius;
          }, Infinity),
          smallR = r - (smallestRadius / 100) * r;
          
        if(!chart.paneBackground) {
            chart.paneBackground = chart.renderer.circle().attr({
            fill: '#fff',
          }).add().shadow({
            color: 'black',
            width: 10
          });
        }
        chart.paneBackground.attr({
            x: x, y: y, r: r
        })

        if(!chart.paneInnerBackground) {
            chart.paneInnerBackground = chart.renderer.circle().attr({
          fill: '#fff',
          zIndex: 6,
        }).add().shadow({
          color: 'black',
          width: 10
        });
        }
        chart.paneInnerBackground.attr({
            x: x, y: y, r: smallR
        })
      }
    }
  }
  ...
});

演示：https://jsfiddle.net/BlackLabel/16tfarc9/
API：https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#circle