Стиль линейного графика с диапазонами в RickshawJS

Я пытаюсь построить графическую систему, в которой линейные графики, которые находятся в пределах диапазона, являются пунктирными линиями, а те, которые превышают или не достигают диапазона, рисуются сплошными линиями. В следующем массиве [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]если мой диапазон [4,7] У меня было бы 2 набора точек: мои данные, которые находятся в диапазоне (пунктирная линия): [null, null, null, 4, 5, 6, 7, null, null, null]; и мои данные вне диапазона (сплошная линия) [1, 2, 3, null, null, null, null, 8, 9, 10],

Я думал, что сделаю это, отрисовывая два линейных графика для каждого набора данных. Один с пунктирным стилем и один с твердым стилем. Чтобы добиться этого, я попробовал POC, чтобы создать разрыв в моих линейных графиках.

Я подумал, что мог бы сделать это, удалив элементы в ряду данных перед отправкой для визуализации ( http://jsfiddle.net/drewsonne/tczooff2/):

var random = new Rickshaw.Fixtures.RandomData(150);

for (var i = 0; i < 150; i++) {
    random.addData(seriesData);
}

// Create empty part of graph
for (var i = 70; i < 100; i++) {
    delete seriesData[0][i];
}

Но я, кажется, получаю прямую интерполированную линию на моем графике, где удалены элементы.

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

Я ценю, что мне, возможно, даже придется разбивать сюжеты на смежные линии. Это потребовало бы 3 разных участка для моего примера выше. Если я сделаю это, мне все еще нужно нарисовать частичный сюжет. Любые пустые элементы в наборе данных выдают ошибку в рикше.

РЕДАКТИРОВАТЬ: Решение состояло в том, чтобы изменить мой код выше, чтобы удалить только значение "у", сохраняя при этом значение "х":

// Create empty part of graph
for (var j = 10; j < 100; j++) {
    seriesData[0][j].y = null;
}

1 ответ

Решение

Не знаю, как это помогает, но я обнаружил, что вы можете преждевременно завершить строку, установив значение в ноль:

seriesData[0][75] = 0;

в результате красная линия рисуется только наполовину нормальным способом.

Похоже, пробелы поддерживаются только в некоторых типах графиков: http://code.shutterstock.com/rickshaw/examples/gaps.html

Другие вопросы по тегам