文本渐变 Highcharts Wordcloud

Question

Wordcloud-highcharts 现在可以在其最新版本 (>=6.0) 中使用，现在我对在文本上布置渐变 (linear/radial) 感到困惑。例如在这个 link 中，如果我将系列对象中的颜色数组更改为

    fillColor: {
        linearGradient: [0, 0, 0, 200],
      stops: [
        [0, 'white'],
        [1, 'black']
      ]
    },

它什么都不做。

Wordcloud 的功能有限，但我无法完成此任务。甚至尝试使用 (k 为不同的文本渐变附加多个 defs，它位于 0 到 n)

之间

    <defs>
<radialGradient id="myRadialGradient_k"
   fx="5%" fy="5%" r="65%"
   spreadMethod="pad">
  <stop offset="0%"   stop-color="#00ee00" stop-opacity="1"/>
  <stop offset="100%" stop-color="#006600" stop-opacity="1" />
</radialGradient>
</defs>

并搜索 class 并应用 css 来填充 myLinearGradient_k by fill:url(#myLinearGradient_k);。但它非常笨重。在这种情况下也无法按 id 搜索，并且附加到 class highcharts-point 是唯一的可能性，这限制了选项。

Answer 1

您可能会发现此现场演示 有帮助：http://jsfiddle.net/kkulig/mnj07vam/

在 chart.events.load 中，我放置了负责查找最大权重、创建梯度（每个点都有一个单独的梯度）并应用它们的代码：

  chart: {
    events: {
      load: function() {
        var points = this.series[0].points,
          renderer = this.renderer,
          maxWeight = 0;

        // find maximum weight   
        points.forEach(function(p) {
          if (p.weight > maxWeight) {
            maxWeight = p.weight;
          }
        });


        points.forEach(function(p, i) {
          var id = 'grad' + i;


          // create gradient
          var gradient = renderer.createElement('linearGradient').add(renderer.defs).attr({
            id: id,
            x1: "0%",
            y1: "0%",
            x2: "100%",
            y2: "0%"
          });

          var stop1 = renderer.createElement('stop').add(gradient).attr({
            offset: "0%",
            style: "stop-color:rgb(255,255,0);stop-opacity:1"
          });

          var stop2 = renderer.createElement('stop').add(gradient).attr({
            offset: Math.round(p.weight / maxWeight * 100) + "%",
            style: "stop-color:rgb(255,0,0);stop-opacity:1"
          });

          // apply gradient
          p.update({
            color: 'url(#' + id + ')'
          }, false);

        });
        this.redraw();
      }
    }
  }

API参考：https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#createElement

文本渐变 Highcharts Wordcloud

Text Gradient Highcharts Wordcloud

highcharts

word-cloud