Мне нужно иметь возможность применять фоновую окраску (и текстовую раскраску для поддержания контраста) к меткам категорий.
Я не смог найти простой способ установить каждую метку категории независимо и придумал рабочую решение, но теперь ширина моего столбца метки слишком велика, и применение marginLeft не работает.
Во-первых, есть более простой способ добиться того, чего я хочу, или решение по ширине.
Вот результат:
и скрипку можно найти здесь
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}"
}]
}],
});