Highcharts пользовательское форматирование / раскраска меток категорий - PullRequest
0 голосов
/ 23 января 2020

Мне нужно иметь возможность применять фоновую окраску (и текстовую раскраску для поддержания контраста) к меткам категорий.

Я не смог найти простой способ установить каждую метку категории независимо и придумал рабочую решение, но теперь ширина моего столбца метки слишком велика, и применение marginLeft не работает.

Во-первых, есть более простой способ добиться того, чего я хочу, или решение по ширине.

Вот результат: enter image description 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}"
    }]
  }],
});

1 Ответ

1 голос
/ 24 января 2020

Чтобы увеличить ширину, вы можете установить width стиль:

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

Демонстрационная версия: https://jsfiddle.net/BlackLabel/nkz9xmh0/

Справочник по API: https://api.highcharts.com/gantt/yAxis.labels.style

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...