Question

好的，所以我遇到了一个有趣的小问题。我正在尝试创建一个测量图表，然后有一个绘图带。很简单。

当我希望绘图带有一个渐变贯穿中心时，复杂性就出现了。

我分叉的粗略小提琴：

应该注意到我正在尝试根据以下方式进行急剧变化的径向梯度：

{
        color: {
          radialGradient: {
            cx: 0.5,
            cy: 0.5,
            r: 0.5
          },
          stops: [
            [0, '#000000'],
            [0.8, '#ffffff'],
            [1, '#000000'],
          ]
        },
        from: 0,
        to: 100,
        innerRadius: '90%',
        outerRadius: '110%'
      }

现在对于单个绘图带，我注意到径向渐变比椭圆更圆，这使得我使用的解决方案不理想。此外，当使用多个绘图带时，此解决方案将无法工作，因为它使用局部绘图带x，y，如果有多个绘图带，则会改变。任何想法都会非常有用。

Answer 1

渐变为椭圆的原因是因为绘图带的边界框不是正方形，而是矩形。这是因为，你没有使用全角度。将渐变与全角度窗格比较 - http://jsfiddle.net/3mm1bjqf/。

因为您的边界框不是正方形，所以您需要为渐变定义自己的坐标系。可以从轴属性获取渐变属性。

您的渐变应如下所示：

 plotBands: [{
   color: {
    radialGradient: {
      gradientUnits: 'userSpaceOnUse', // we use our own coord system instead of bbox
      cx: axis.left + axis.center[0],
      cy: axis.top + axis.center[1],
      r: axis.center[2] / 2 * 1.1 // multiplying by 1.1 because plotBand's outerRadius is set to 110%
    },

不幸的是，这个渐变必须动态设置，因为在渲染图表之前你不知道轴坐标 - 所以它必须在加载/重绘事件上完成。

  var chart = new Highcharts.Chart({

chart: {
  renderTo: 'container',
  type: 'gauge',
  events: {
    load: function() {
      var axis = this.yAxis[0];

      axis.update({
        plotBands: [{
          color: {
            radialGradient: {
              gradientUnits: 'userSpaceOnUse',
              cx: axis.left + axis.center[0],
              cy: axis.top + axis.center[1],
              r: axis.center[2] / 2 * 1.1
            },
            stops: [
              [0, '#000000'],
              [0.8, '#ffffff'],
              [1, '#000000'],
            ]
          },
          from: 0,
          to: 100,
          innerRadius: '90%',
          outerRadius: '110%'
        }]
      })
    }
  }
},

示例：http://jsfiddle.net/zfyzvqw1/

径向渐变，用于测量仪上的绘图带？

1 个答案: