В моих верхних диаграммах некоторые пузыри имеют длинные метки. Мне нужно ограничить эту метку только размером диаметра этого пузыря. (Например, плавный граф XIMT-DL должен быть XIMT...). Вы знаете, как это сделать?
code example
: пример кода
В моих верхних диаграммах некоторые пузыри имеют длинные метки. Мне нужно ограничить эту метку только размером диаметра этого пузыря. (Например, плавный граф XIMT-DL должен быть XIMT...). Вы знаете, как это сделать?
code example
: пример кода
К сожалению, такое поведение не реализовано в ядре. Однако этого можно легко добиться, внедрив собственную логику. В обратном вызове chart.events.render
проверьте ширину каждой точки и ширину ее метки данных. Когда метка данных шире точки, просто обрежьте ее и при необходимости добавьте точки. Проверьте код и демо, размещенные ниже:
Код:
chart: {
type: 'packedbubble',
height: '100%',
events: {
render: function() {
const chart = this;
chart.series.forEach(series => {
series.points.forEach(point => {
if (point.graphic.width > 1) {
if (point.dataLabel.width > point.graphic.width) {
let indic = (
(point.dataLabel.width - point.graphic.width) /
point.dataLabel.width
),
text = point.series.name,
textLen = text.length,
maxTextLen = Math.floor(textLen * (1 - indic)),
newText,
dotted,
substringLen;
dotted = maxTextLen > 2 ? '..' : '.';
substringLen = maxTextLen > 2 ? 2 : 1;
newText = text.substring(0, maxTextLen - substringLen) + dotted;
point.dataLabel.text.element.innerHTML =
'<tspan>' + newText + '</tspan>';
point.dataLabel.text.translate(
(point.dataLabel.width - point.graphic.width) / 2,
0
);
}
}
});
})
}
}
}
Демонстрация:
Справочник по API:
Другой подход — добавить прослушиватель событий afterRender
и изменить там метки, чтобы параметры диаграммы определялись отдельно.
Код:
(function(H) {
H.addEvent(H.Series, 'afterRender', function() {
console.log(this);
const chart = this.chart;
chart.series.forEach(series => {
if (series.points && series.points.length) {
series.points.forEach(point => {
if (point.graphic.width > 1) {
if (point.dataLabel.width > point.graphic.width) {
let indic = (
(point.dataLabel.width - point.graphic.width) /
point.dataLabel.width
),
text = point.series.name,
textLen = text.length,
maxTextLen = Math.floor(textLen * (1 - indic)),
newText,
dotted,
substringLen;
dotted = maxTextLen > 2 ? '..' : '.';
substringLen = maxTextLen > 2 ? 2 : 1;
newText = text.substring(0, maxTextLen - substringLen) + dotted;
point.dataLabel.text.element.innerHTML =
'<tspan>' + newText + '</tspan>';
point.dataLabel.text.translate(
(point.dataLabel.width - point.graphic.width) / 2,
0
);
}
}
});
}
})
});
})(Highcharts);
Демонстрация: