径向渐变填充未居中的 Highcharts 蜘蛛图 [英] Highcharts spider chart with radial gradient fill not centered

问题描述

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

I have a spider web highcharts that is filled with radial gradient. When all edges have same value, the gradient is fine. But when it has random values, gradient doesn't fill right. It's off the center and becomes oval shaped.

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/

推荐答案

更新:

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

Update:

The original solution that I proposed didn't handle the shape of the gradient - it could be oval instead of perfect circle.

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

Using gradientUnits: 'userSpaceOnUse' seems to be a better and simplier approach.

  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 渐变的中心似乎是基于形状本身的最小和最大坐标值，而不是整个图表.

It seems that the center of the SVG gradient is based on the minimum and maximum coordinates values of the shape itself and not the whole chart.

这里的解决方案是手动计算并应用radialGradient.cx和radialGradient.cy属性的偏移量.

The solution here is to manually compute and apply the offset for radialGradient.cx and radialGradient.cy properties.

在这个现场演示中，它只针对 x 值(y 值需要类推处理)完成:https://fiddle.jshell.net/kkulig/ru85bz24/

In this live demo it's done only for the x value (y value need to be handled analogically): 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.

To see the effect click Toggle Contrast first and then Toggle Numbers.

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

Highcharts doesn't put the center of the plot exactly in the center of the chart so I added offsetAdjustment variable that corrects the position of the gradient (3px in this case).

这篇关于径向渐变填充未居中的 Highcharts 蜘蛛图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！