RickshawJS 中带有范围的样式线图

Question

我正在尝试构建一个图形系统，其中在一个范围内的线图是虚线，超出或未达到范围的线图是用实线绘制的。也就是说，在下面的数组 [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 个不同的图。如果这样做，我仍然需要绘制部分图。 rickshawjs 中数据集中的任何空元素都会出错。

编辑：解决方案是更改我上面的代码以仅删除 'y' 值，同时保留 'x' 值：

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

Answer 1

不知道它有什么帮助，但我只发现您可以通过将值设置为零来提前结束该行：

seriesData[0][75] = 0;

导致红线仅以正常方式绘制一半。

看起来只有某些类型的图表支持间隙：http://code.shutterstock.com/rickshaw/examples/gaps.html

RickshawJS 中带有范围的样式线图

Style line graph with ranges in RickshawJS

javascript

graphing

rickshaw