Question

我正在创建一个应用程序，其中我需要条形高图，并且图表中的条形使用了多种颜色。但是对于图例，我想指定一种特定的颜色，并在单击图例时将其显示为灰色，这是高图的默认行为

我在系列中添加了多种颜色，所以我不能在那添加相同的颜色

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'
        }
      ]
    };

Answer 1

您可以包装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

当我的图表具有多个颜色条目时，如何为highcharts图例正方形符号着色

1 个答案: