Highcharts蜘蛛图表与径向渐变填充不居中

Question

我有一个充满径向渐变的蜘蛛网高图。当所有边具有相同的值时，渐变很好。但是当它具有随机值时，渐变不能正确填充。它离开中心并变成椭圆形。

var highChartsData = {
chart: {
  polar: true,
  type: 'area',
  events: {
        load: function () {series = this.series[0];}
    }
},
xAxis: {
  categories: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
  tickmarkPlacement: 'on',
  lineWidth: 0

},
yAxis: {
  gridLineInterpolation: 'polygon',
  lineWidth: 0,
  min: 0,
  max: 12
},
tooltip: {
    enabled: false
},
title: {
    enabled: false
},
credits: {
  enabled: false
},
exporting: {
  enabled: false
},
legend: {
  enabled: false
},
series: [{
  name: 'Planning',
  type: 'area',
  color: {
    radialGradient: {
        cx: 0.5,
      cy: 0.5,
      r: 1
    },
    stops: [
      [0, 'rgba(147, 255, 228, 0.8)'],
      [1, 'rgba(0, 105, 165,1)']
    ]
  },
  data: [15, 15, 15, 15, 15, 15, 15],
  pointPlacement: 'on'
}]};

检查此链接：http://jsfiddle.net/a6fmfq1a/44/

Answer 1

更新：

我提出的原始解决方案没有处理渐变的形状 - 它可能是椭圆形而不是完美的圆形。

使用qazxsw poo似乎是一种更好，更简单的方法。

gradientUnits: 'userSpaceOnUse'

CSS：

  defs: {     
    gradient1: { // key
      tagName: 'radialGradient',
      id: 'gradient-1',
      gradientUnits: 'userSpaceOnUse',     
      cx: 300,
      cy: 160,
      r: 300,
      children: [{
        tagName: 'stop',
        'stop-color': 'rgba(0, 255, 0,1)',
        offset: 0
      }, {
        tagName: 'stop',
        'stop-color': 'rgba(0, 0, 0, 1)',
        offset: 0.3
      }]
    }
  },

现场演示：

.highcharts-area {
  fill-opacity: 1;
  fill: url(#gradient-1);
}

此示例使用样式模式（https://fiddle.jshell.net/kkulig/vokL08ds/）。

---

原帖：

看起来SVG梯度的中心是基于形状本身的最小和最大坐标值而不是整个图表。

这里的解决方案是手动计算并应用https://www.highcharts.com/docs/chart-design-and-style/style-by-css和radialGradient.cx属性的偏移量。

在这个现场演示中，它只针对x值（y值需要类比处理）：radialGradient.cy

https://fiddle.jshell.net/kkulig/ru85bz24/

要查看效果，请先点击

// handle gradient center
var x1, // leftmost
  x2, // rightmost
  centerX,
  offsetPx,
  offsetAdjustment = -3;

x1 = x2 = series.points[0].graphic.x;

// find leftmost and righmost x positions
series.points.forEach(function(p) {
  var x = p.graphic.x;
  if (x < x1) {
    x1 = x;
  } else if (x > x2) {
    x2 = x;
  }
});

// compute offset
centerX = (x1 + x2) / 2;
offsetPx = (chart.chartWidth / 2) - centerX + offsetAdjustment;
offsetFraction = offsetPx / (x2 - x1);


// update gradient
series.update({
  color: {
    radialGradient: {
      cx: 0.5 + offsetFraction,
      cy: 0.5,
      r: 1
    }
  }
});

，然后点击Toggle Contrast。

Highcharts不会将图的中心准确地放在图表的中心，所以我添加了Toggle Numbers变量来校正渐变的位置（在这种情况下为3px）。