Текстовый градиент Highcharts Wordcloud

Wordcloud-highcharts теперь доступен в своей последней версии (> = 6.0), и теперь я сбиваю с толку размещение градиента (линейного / радиального) поверх текстов. Например, в этом link, если я изменю массив цветов в объекте серии на

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

Это ничего не делает.

Wordcloud имеет ограниченную функциональность, но я не могу выполнить эту задачу. Даже пытался добавить несколько определений для разных градиентов текста с помощью (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 для заполнения этого myLinearGradient_k на fill:url(#myLinearGradient_k);. Но он очень громоздкий и тяжелый. Также поиск по id в этом случае невозможен, и добавление к классу highcharts-point является единственной возможностью, что ограничивает возможности.


highcharts word-cloud
person Shashish Chandra    schedule 19.12.2017    source источник
comment
Просто чтобы я правильно понял, для чего вам нужен этот градиент? На основе положения оси X? Исходя из веса? Одинаковый градиент для всех текстов?   -  person Halvor Holsten Strand    schedule 19.12.2017
comment
Градиент в зависимости от веса. например если относительный вес равен 4/10, то это соответственно стоп-поинты.   -  person Shashish Chandra    schedule 19.12.2017

Ответы (1)


arrow_upward
2
arrow_downward

Вам может быть полезна эта демонстрация: 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

person Kamil Kulig    schedule 20.12.2017
comment
Итак, вызов всего под нагрузкой - это способ, спасибо за ответ. - person Shashish Chandra; 22.12.2017