javascript - 具有径向渐变填充的 Highcharts 蜘蛛图未居中

Question

我有一个充满径向渐变的蜘蛛网 Highcharts 。当所有边都具有相同的值时，梯度很好。但是当它有随机值时，渐变不会正确填充。它偏离中心，变成椭圆形。

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

更新:

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

使用 gradientUnits: 'userSpaceOnUse' 似乎是一种更好、更简单的方法。

  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
      }]
    }
  },

CSS:

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

现场演示: https://fiddle.jshell.net/kkulig/vokL08ds/

此示例使用样式化模式 ( https://www.highcharts.com/docs/chart-design-and-style/style-by-css )。

---

原帖:

SVG 渐变 的中心似乎是基于形状本身的最小和最大坐标值，而不是整个图表。

解决方案此处是手动计算和应用 radialGradient.cx 和 radialGradient.cy 属性的偏移。

在这个现场演示中，它只针对x值(y值需要类比处理)完成: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，然后点击Toggle Numbers。

Highcharts 没有将绘图的中心准确地放在图表的中心，因此我添加了 offsetAdjustment 变量来校正渐变的位置(在本例中为 3px)。