Повернутые метки оси X перекрывают сам график - PullRequest
Новая
       34

Повернутые метки оси X перекрывают сам график

8 голосов
/ 17 марта 2011

Я борюсь с повернутыми метками оси X. Если они длиннее 5-6 символов, они перекрывают график, как вы можете видеть здесь: 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 задается в свойстве меток, оно учитывается только для меток меньшего размера.

Кто-нибудь знает решение или что я делаю не так?

Ответы [ 2 ]

18 голосов
/ 17 марта 2011

Вы можете попробовать добавить метод align: 'right' к объекту меток по оси X.

, например 

xAxis: { categories: ['Jan', '02/03/2011', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], labels : { y : 20, rotation: -45, align: 'right' } },
0 голосов
/ 21 сентября 2011

Иногда вы должны делать то, что хотят клиенты, и я знаю, что ниже это не лучший способ, но, возможно, это кому-то поможет). Насколько я знаю, HighCharts использует два способа визуализации графиков. Это SVG (например, поддерживается браузер Chrome, IE> 8) и VML (поддерживается IE <= 8). Таким образом, каждый путь содержит точки, где эта проблема может быть решена с помощью мягкого ломания. </p>

Чтобы разрешить это в 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 ().

...