Как раскрасить символ квадрата легенды хай-чартов, когда на моей диаграмме несколько цветовых записей? - PullRequest
Новая
       17

Как раскрасить символ квадрата легенды хай-чартов, когда на моей диаграмме несколько цветовых записей?

1 голос
/ 12 апреля 2019

Я создаю приложение, в котором мне нужны верхние графики баров, и я использовал несколько цветов для баров на графике.Но для легенды я хочу указать один конкретный цвет, и по щелчку легенды он показывает изменение на серый цвет, который является поведением по умолчанию для высокого графика

Я добавил несколько цветов в серию, поэтому я не могу добавить тот жецвет там 

this.chartConfigWeekly = {
      chart: {
        zoomType: 'none'
      },
      title: {
        text: 'Weekly Utilization'
      },
      credits: {
        enabled: false
      },
      colors: this.colorArrWeekly,
      legend: {
        symbolRadius:0
      },
      xAxis: [
        {
          categories: this.weeklyUtilizationCategories,
          crosshair: true,
          gridLineWidth: 1,
          tickmarkPlacement: 'on',
          // tickInterval: 4
          tickPositions: this.tickPosition,
        }
      ],
      yAxis: [
        {
          // Primary yAxis
          labels: {
            format: '{value} %',
            style: {
              color: 'gray'
            }
          },
          max: 100,
          min: 0,
          alignTicks: false,
          tickAmount: 6,
          tickInterval: 20,
          title: {
            text: 'Utilization',
            style: {
              color: 'black'
            }
          },
          opposite: true
        },
        {
          // Secondary yAxis
          // gridLineWidth: 0,
          allowDecimals: false,
          title: {
            text: 'Number of Samples',
            style: {
              color: 'black'
            }
          },
          tickAmount: 6,
          labels: {
            format: '{value} ',
            style: {
              color: 'gray'
            }
          }
        }
      ],
      tooltip: {
        shared: true,
        useHTML: true,
        headerFormat: '<small>{point.point.display}</small><table><br>',
        crosshairs: true,
        positioner: function(labelWidth, labelHeight, point) {
          var x;
          if (point.plotX - labelWidth / 2 > 0) {
            x = point.plotX - labelWidth / 2;
          } else {
            x = 0
          }
          return {
            x: x,
            y: point.plotY
          }
        },
        shape: 'square'

      },
      series: [
        {
          name: 'total number of samples injected',
          type: 'column',
          yAxis: 1,
          data: this.weeklyUtilizationData,
          tooltip: {
            valueSuffix: ''
          },
          colorByPoint: true
        },
        {
          name: '% of usage per total hours 24/7',
          type: 'spline',
          data: this.weeklyUtilizationUsage,
          tooltip: {
            valueSuffix: ''
          },
          color: 'blue'
        }
      ]
    };

1 Ответ

0 голосов
/ 12 апреля 2019

Вы можете обернуть метод colorizeItem и предоставить пользовательское свойство legendColor: 

(function(H) {
    H.wrap(H.Legend.prototype, 'colorizeItem', function(proceed, item, visible) {
        var color = item.color;

        item.color = item.options.legendColor;
        proceed.apply(this, Array.prototype.slice.call(arguments, 1));
        item.color = color;
    });
}(Highcharts));

Опции серии: 

series: [{
        ...,
        legendColor: 'red',
        colorByPoint: true
    }, ...
]

Демо: http://jsfiddle.net/BlackLabel/7qfcextj/

Документы: https://www.highcharts.com/docs/extending-highcharts

...