Я пытаюсь создать диаграмму как этот в Highcharts (см скрипки):
Проблема заключается в нижних категориях. Они добавляются как вторая ось:
{
tickPositions: [1, 3, 4, 5, 10],
categories: ['Preparation', 'Base 0', 'Base 1', 'Base 2', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
gridLineWidth: '1',
lineWidth: 1,
tickmarkPlacement: 'on'
}
Они должны совпадать с правильными диапазонами дат, которые указаны столбцами daterange выше.
Но, добавляя категории в качестве второй оси, представляется невозможным упорядочить их по дате.
Как это делается в Highcharts?
Спасибо, Филипп
Категории в Highcharts имеют одинаковую ширину, поэтому для достижения желаемого результата я бы использовал другой подход. Я бы использовал Highcharts.SVGRenderer
для создания прямоугольников и меток, которые будут имитировать ось:
var categories = [{
name: 'Preparation',
value: 4,
color: 'red'
}, {
name: 'Base1',
value: 2,
color: 'blue'
}, {
name: 'Base2',
value: 3,
color: 'green'
}, {
name: 'Base3',
value: 1,
color: 'orange'
}]
Highcharts.chart('container', {
xAxis: {
visible: false
},
chart: {
marginBottom: 150,
events: {
render: function() {
var index = 0,
points = this.series[0].points,
pointWidth = points[0].pointWidth,
x,
y = this.plotTop + this.plotSizeY + 10,
height = 10,
width;
if (!this.additionalAxis) {
this.additionalAxis = [];
} else {
Highcharts.each(this.additionalAxis, function(el) {
el.destroy();
});
this.additionalAxis.length = 0;
}
Highcharts.each(categories, function(category) {
x = points[index].plotX - pointWidth / 2;
width = points[index + category.value - 1].plotX - x + pointWidth / 2;
x += this.plotLeft;
this.additionalAxis.push(
this.renderer
.rect(x, y, width, height)
.attr({
fill: category.color
})
.add()
);
this.additionalAxis.push(
this.renderer
.text(category.name, x + width / 2, y + height * 2)
.attr({
align: 'center'
})
.add()
);
index += category.value;
}, this);
}
}
},
series: [{
type: 'column',
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 1, 2, 3, 4, 5, 6, 7, 8, 9]
}]
});
Демо-версия: http://jsfiddle.net/BlackLabel/vupj253c/
API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect
rotation
зависимым от ширины диаграммы, например: jsfiddle.net/BlackLabel/myn329zk