Highcharts自定义格式/类别标签的颜色

Question

我需要能够为类别标签应用背景色（和文本色以保持对比度）。

我找不到一种简单的方法来独立设置每个类别标签，并提出了一个可行的解决方案，但是现在我的标签列的宽度太宽，无法应用marginLeft。

首先，有一种更简单的方法来实现我想要的效果或解决宽度问题。

以下是结果：

并且可以找到小提琴here

    Highcharts.ganttChart('container', {

  chart: {
//  marginLeft: 400,
    events: {
      load: function() {
        for (var tickPos in this.yAxis[0].ticks) {
          console.log(tickPos);
          var ch = this.yAxis[0].chart;
          var tick = this.yAxis[0].ticks[tickPos];
          var label = tick.label;
          if (typeof label !== "undefined") {
            var text = label.textStr;
            var obj = JSON.parse(text);
            var element = label.element;
            element.textContent = obj.name;
            if (typeof obj.background !== "undefined") {
              element.style["background-color"] = obj.background;
            }
            if (typeof obj.color !== "undefined") {
              element.style["color"] = obj.color;
            }
          }
        }
      }
    }
  },
  title: {
    text: 'Highcharts Gantt Chart'
  },

  subtitle: {
    text: 'With linked to split'
  },

  xAxis: {
    minPadding: 0.05,
    maxPadding: 0.05
  },
  "yAxis": [{
    "scrollbar": {
      "enabled": true
    },
    labels: {
      useHTML: true
    },
    "uniqueNames": true
  }],
  tooltip: {
    outside: true
  },
  rangeSelector: {
    enabled: true,
    selected: 5
  },
  time: {
    useUTC: true
  },
  plotOptions: {
    column: {
      grouping: true
    }
  },

  "series": [{
    "name": "main",
    "tooltip": {
      "headerFormat": null
    },
    "data": [{
      "name": '{"name": "Color prep and printing", "background":"green", "color":"white"}',
      "id": "_dqbcsMWXEeeTdKTuQU2hRA",
      "start": 1577836800000,
      "end": 1582934400000,

      "color": {
        "patternIndex": 0
      }
    }, {
      "name": '{"name": "Send to color house", "background":"blue", "color":"white"}',
      "id": "_dqkmv8WXEeeTdKTuQU2hRA",
      "parent": "_dqbcsMWXEeeTdKTuQU2hRA",
      "start": 1577836800000,
      "end": 1580428800000,
      "duration": 30
    }, {
      "name": '{"name": "Generate proofs", "background":"teal", "color":"white"}',
      "id": "_dq3hkMWXEeeTdKTuQU2hRA",
      "parent": "_dqbcsMWXEeeTdKTuQU2hRA",
      "start": 1578614400000,
      "end": 1579651200000,
      "duration": 12,
      "dependency": [{
        "to": "_dqkmv8WXEeeTdKTuQU2hRA"
      }]
    }, {
      "name": '{"name": "Print and ship", "background":"crimson"}',
      "id": "_drLDlcWXEeeTdKTuQU2hRA",
      "parent": "_dqbcsMWXEeeTdKTuQU2hRA",
      "start": 1581292800000,
      "end": 1582934400000,
      "duration": 19,
      "dependency": [{
        "to": "_dq3hkMWXEeeTdKTuQU2hRA"
      }]
    }],
    "dataLabels": [{}, {
      "enabled": true,
      "align": "right",
      "format": "{point.duration}"
    }]
  }],
});

Answer 1

要增加宽度，可以设置width样式：

yAxis: {
    labels: {
        useHTML: true,
        style: {
            width: '300px',
            textOverflow: 'ellipsis'
        }
    },
    ...
},

---

实时演示： https://jsfiddle.net/BlackLabel/nkz9xmh0/

API参考： https://api.highcharts.com/gantt/yAxis.labels.style