Стиль линейного графика с диапазонами в 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