Добавить значение к оси графика рикши и что такое ticksTreatment and Preserve

Это мой первый вопрос здесь, поэтому, пожалуйста, полегче :)

Я пытаюсь реализовать некоторые линейные графики с помощью графиков рикши, пользовательского интерфейса d3 и jquery. У меня есть несколько вертикальных вкладок, и я успешно загрузил диаграммы из внешних html-файлов.

Было немного документации по Rickshaw, но я не смог найти то, что мне конкретно нужно, поэтому я задам этому любезному сообществу несколько вопросов, если это нормально?

Во-первых, при загрузке вкладок в пользовательском интерфейсе jquery из внешних html-файлов, где я должен поместить все javascript и css на встроенную страницу (см. ниже historic.html) или на родительскую страницу? Я пробовал оба, и они, похоже, работают, я просто хотел узнать о лучших практиках.

<ul>
    <li><a href="#tabs-1"><div id="live-icon"></div>LIVE GRAPHS</a></li>
    <li><a href="historic.html"><div id="historic-icon"></div>HISTORIC DATA</a></li>

Во-вторых, ось X на графике указана в миллисекундах. Я хотел бы добавить «мс» в конец каждой из «тиков» оси X. так что по оси x будут отображаться 50 мс, 100 мс, 150 мс и т. д. Можно ли это сделать?

И, наконец, в Rickshaw есть пример с веером (http://code.shutterstock.com/rickshaw/examples/extensions.html), в котором есть все навороты. У него есть два свойства, о которых я не могу найти никакой информации. сохранить: правда? а в другом примере есть tickFormat и tickTreatment? Может кто-нибудь объяснить, что они делают.

var graph = new Rickshaw.Graph( {
element: document.getElementById("chart"),
width: 900,
height: 500,
renderer: 'area',
stroke: true,
preserve: true,

Большое спасибо за Вашу помощь.


tabs d3.js preserve rickshaw
person designscoop    schedule 19.03.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вероятно, это больше не актуально для ОП, но, поскольку на него все еще нет ответа, я могу ответить на вопросы рикши:

Чтобы добавить ms в конец ваших тиков, вам нужно использовать опцию tickFormat. В руководстве они настроили ось следующим образом:

var y_axis = new Rickshaw.Graph.Axis.Y( {
        graph: graph,
        orientation: 'left',
        tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
        element: document.getElementById('y_axis'),
} );

Здесь они настраивают tickFormat как значение по умолчанию, которое они построили, но на самом деле может потребоваться все, что соответствует тому, что tickFormat оси d3 принимает. tickFormat должна быть функцией, которая принимает число и выводит строку. Вы, вероятно, хотите что-то вроде строк

var y_axis = new Rickshaw.Graph.Axis.Y( {
        graph: graph,
        orientation: 'left',
        tickFormat: function (d) { return d + ' ms'; },
        element: document.getElementById('y_axis'),
} );

Это сделает тики простым числом, за которым следует ms.

Это также происходит, чтобы ответить на одну часть из трех следующих вопросов. Две другие части касаются tickTreatment и preserve.

Короткий ответ заключается в том, что tickTreatment добавляется как класс к тикам. Причина, по которой это полезно, заключается в стилях CSS, которыми пользуется Rickshaw. У них есть несколько пресетов, которые вы можете использовать для этого. Тот, который они используют в этом примере, называется glow, который добавляет белое свечение вокруг текста, чтобы сделать его читаемым поверх графика.

preserve — это параметр, который влияет на то, копируются ли предоставленные вами данные перед их использованием. Соответствующий раздел из источника Rickshaw находится здесь:

var preserve = this.preserve;
if (!preserve) {
    this.series.forEach( function(series) {
        if (series.scale) {
            // data must be preserved when a scale is used
            preserve = true;
        }
    } );
}

data = preserve ? Rickshaw.clone(data) : data;

По сути, если вы установите preserve в true (по умолчанию false), он сначала сделает копию данных.

person Mike Precup    schedule 06.08.2014