Question

Wordcloud-highcharts现在可以在其最新版本（＆gt; = 6.0）中使用，现在我对在文本上布置渐变（线性/径向）感到困惑。例如，在link中，如果我将系列对象中的颜色数组更改为

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

它什么都不做。

Wordcloud功能有限，但我无法完成此任务。甚至尝试为不同的文本渐变添加多个defs（ k就是这样，它位于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>

并搜索该类并应用css以fill:url(#myLinearGradient_k);填充此 myLinearGradient_k 。但它非常笨拙和沉重。在这种情况下也无法按id搜索，并且附加到类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

Text Gradient Highcharts Wordcloud

1 个答案: