Повернутые метки оси x перекрывают сам график
-
26-10-2019 - |
Вопрос
Я борюсь с повернутыми метками оси X. Если они длиннее 5-6 Chars, они перекрывают график, как вы можете увидеть здесь: http://jsfiddle.net/kmft9/215/Если это не отображается, вы можете воспроизвести ошибку, вставленную ниже кода в окне jsfiddle.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
marginLeft: 120
},
xAxis: {
categories: ['Jan', '02/03/2011', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], labels : { y : 20, rotation: -45 }
},
yAxis: {
lineWidth: 1,
offset: 0,
labels : { x: -20 },
title: {
text: 'Primary Axis'
},
tickWidth: 1
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
Несмотря на то, что устанавливает Y-значение на свойство метки, это уважается только для меньших метков.
Кто -нибудь знает решение или то, что я делаю не так?
Решение
Вы можете попробовать добавить выравнивание: «Право» в объект метки оси X.
например
xAxis: { categories: ['Jan', '02/03/2011', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], labels : { y : 20, rotation: -45, align: 'right' } },
Другие советы
Иногда вы должны делать то, что желает клиенты, и я знаю, как ниже это не лучший способ, но, возможно, это поможет кому -то). Итак, как я знаю, Hightcharts использует два способа визуализации диаграмм. Это Svg (Например, поддерживается Chrome, т.е.> 8 браузеров) и VML (Поддерживается т.е. <= 8). Таким образом, каждый путь содержит точки, где эта проблема может быть решена, которая вам нужна с мягким разрывом.
Чтобы разрешить его в SVG, вы должны найти функцию BuildText и изменить на данный момент:
// check width and apply soft breaks
if (width) {
...
}
Например, чтобы добавить новый отдельный символ:
...
var words = span.replace(/\\/g, '\\ ').replace(/-/g, '- ').split(' '),
...
tspan.appendChild(doc.createTextNode(words.join(' ').replace(/\\ /g, '\\').replace(/- /g, '-')));
...
Если вы хотите заставить его работать в VML. Вы можете написать свою собственную функцию, которая делает то же самое, что код в функции BuildText:
function softBreaks()
{
//if ie and vml
hasSVG = !!document.createElementNS && !!document.createElementNS("http://www.w3.org/2000/svg", "svg").createSVGRect;
if(!hasSVG)
{
//for each
$.each($('.highcharts-axis > span > div'), function(index, value) {
var width = value.parentNode.style.posWidth;
var div = value;
if (width) {
var words = value.innerText.replace(/\//g, '/ ').replace(/\\/g, '\\ ').replace(/\./g, '. ').replace(/-/g, '- ').split(' '),
tooLong,
actualWidth,
rest = [];
while (words.length || rest.length) {
//actualWidth = value.parentNode.offsetWidth;
actualWidth = value.parentNode.scrollWidth;
tooLong = actualWidth > width;
if (!tooLong || words.length === 1) { // new line needed
words = rest;
rest = [];
if (words.length) {
div = document.createElement("div");
value.parentNode.appendChild(div);
if (actualWidth > width) { // a single word is pressing it out
width = actualWidth;
}
}
} else {
div.removeChild(div.firstChild);
rest.unshift(words.pop());
}
if (words.length) {
div.appendChild(document.createTextNode(words.join(' ').replace(/\/ /g, '/').replace(/\\ /g, '\\').replace(/\. /g, '.').replace(/- /g, '-')));
}
}
}
});
}
}
А после этого вы должны назвать эту функцию при загрузке диаграммы www.highcharts.com/ref/#chart-events- load (извините, я новый пользователь). Если у вас есть несколько диаграмм на странице, вы можете перенести в качестве идентификатора диаграммы параметров в функцию SoftBreaks ().