如何在具有 highcharts 的实体 Jmeter 上产生阴影

5t7ly7z5  于 12个月前  发布在  Highcharts
关注(0)|答案(1)|浏览(205)

我们正在使用多kpi测量仪highchart(solid gauge),这里我们面临一个背景边界阴影的问题。由于缺乏阴影效果,背景看起来非常透明。


的数据
我们需要这样的效果,但我们无法达到这种效果。



背景是非常轻的,因为它看起来像没有它的轨道。

njthzxwz

njthzxwz1#

不幸的是,与其他系列(如Pie Solid Gauge)不同,它没有可以定义阴影的阴影属性。
但是,您可以使用render函数来实现这一点,在该函数中,您可以通过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

相关问题