Text Gradient Highcharts Wordcloud

Question

Wordcloud-highcharts ist jetzt in seiner neuesten Version (> = 6.0) verfügbar und jetzt bin ich verblüfft darüber, den Verlauf (linear/radial) über Texte auszulegen. Zum Beispiel in diesen link, wenn ich den Farben-Array in der Serie Objekt zu

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

ändern tut es nichts.

Wordcloud hat eingeschränkte Funktionalität und ich kann diese Aufgabe nicht ausführen. Selbst mit mehreren defs für verschiedenen Text Gradienten versuchte Anfügen (k derart ist, daß sie zwischen 0 bis n liegen)

<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> 

und für die Klasse, die Suche und anwenden CSS mit diesem myLinearGradient_k durch fill:url(#myLinearGradient_k); zu füllen. Aber es ist sehr ungeschickt und schwer. Auch die Suche nach ID ist in diesem Fall nicht möglich und das Anhängen an die Klasse highcharts-point ist die einzige Möglichkeit, die die Optionen einschränkt.

Answer 1

können Sie finden diese Live-Demo hilfreich: http://jsfiddle.net/kkulig/mnj07vam/

In chart.events.load ich den Code verantwortlich für die Suche nach maximalem Gewicht gelegt, Steigungen zu schaffen (jeder Punkt hat eine separaten) und deren Anwendung:

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 Referenz:https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#createElement