텍스트 그라디언트 Highcharts Wordcloud

Question

Wordcloud-highcharts는 최신 릴리스 (> = 6.0)에서 사용할 수 있으며 이제는 텍스트 위에 그라디언트 (선형/방사형)를 배치하는 것을 당황하고 있습니다. 예를 들어이 link에서 계열 객체의 색상 배열을

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

으로 변경하면 아무 효과가 없습니다.

Wordcloud는 기능이 제한되어 있지만이 작업을 수행 할 수 없습니다. 비록 서로 다른 텍스트 구배에 대해 여러 인증 된 정의를 추가하려고

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

및 클래스를 검색하고 fill:url(#myLinearGradient_k);하여 myLinearGradient_k 채우기 CSS를 적용 (K는 N 0 사이에 놓여 지도록이다). 그러나 그것은 매우 서투르고 무겁다. 또한 id에 의한 검색은이 경우 불가능하며 클래스 highcharts-point에 추가하는 것이 옵션을 제한하는 유일한 가능성입니다.

Answer 1

당신은 도움이 라이브 데모를 찾을 수 있습니다 :

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(); 
     } 
    } 
    } 

: 그들을 그라디언트를 생성 (모든 지점은 별도의 일을 가지고) 및 적용 chart.events.load에서 http://jsfiddle.net/kkulig/mnj07vam/

내가 최대 중량을 찾는 책임이있는 코드를 배치를

---

API 참조 :https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#createElement