jqPlot - многострочные тики с углом по оси X - PullRequest
Новая
       7

jqPlot - многострочные тики с углом по оси X

6 голосов
/ 15 марта 2011

У меня вопрос по тикам по оси x.Я работаю с jqPlot 0.9.7

Мои тики многострочные, например: a <br> b <br> c <br> d.Я использую renderer: $.jqplot.CategoryAxisRenderer, и он работает хорошо, поэтому галочки отображаются в несколько строк, а
работает.

Теперь мне нужно повернуть их на 30º.Я попробовал 'angle: -30', но он не работает.

С этим конфигом: 

xaxis: {
        renderer: $.jqplot.CategoryAxisRenderer,
        tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
        ticks: ['a <br> b <br> c <br> d' , 'p <br> q <br> r <br> s'],
        tickOptions:{
                angle: -30,
                fontSize: '9px'
        }

}

Галочки показаны в одну повернутую длинную линиюНи <br>, ни \n не интерпретируются так, как мне нужно.Это лучший подход, который я нашел.

Есть ли какое-то решение для этого?Как я мог написать повернутые текстовые галочки?

Любое предложение будет очень полезным для меня.Заранее спасибо.С наилучшими пожеланиями

Ответы [ 2 ]

16 голосов
/ 01 июня 2011

Чтобы правильный синтаксис работал, вам нужно включить следующие сценарии вместе со сценариями jqPlots по умолчанию.

  • jqplot.canvasTextRenderer.min.js
  • jqplot.dateAxisRenderer.min.js
  • jqplot.canvasAxisTickRenderer.min.js

(вышеуказанные файлы поставляются с пакетом jqPlot).

Затем добавьте следующее к списку параметров графика 

axesDefaults: {
    tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
},

Тогда ваш 

    tickOptions: {
        angle: -30,
    }

будет эффективным.

например. 

....
    series: [{renderer: $.jqplot.BarRenderer}],
    axesDefaults: {
        tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
        tickOptions: {
            angle: -90,
            fontSize: '10pt'
        }
    },
    axes: {
        xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            ticks: ticks
        },
        yaxis: {    
            tickOptions: {
                angle: 0,
                fontSize: '10pt'
            }
        }
    },
....

Пример с jqPlot можно найти здесь: http://www.jqplot.com/tests/rotated-tick-labels.php

3 голосов
/ 10 ноября 2011

Не забудьте добавить: 

<script type="text/javascript" src="../src/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
...