样式线图与RickshawJS中的范围

I'm trying to build a graphing system whereby line plots which are within a range, are dotted lines and those either exceeding or not reaching the range are drawn in solid lines. That is, in the following array [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], if my range is [4,7] I would have 2 sets of points: my data which is in range (dotted line): [null, null, null, 4, 5, 6, 7, null, null, null]; and my data which is out of range (solid line) [1, 2, 3, null, null, null, null, 8, 9, 10].

我正在尝试构建一个图形系统,其中在一个范围内的线图是虚线,超出或未达到范围的线图是用实线绘制的。也就是说,在下面的数组[1,2,3,4,5,6,7,8,9,10]中,如果我的范围是[4,7],我将有2组点数:我的数据是in range(虚线):[null,null,null,4,5,6,7,null,null,null];和我的数据超出范围(实线)[1,2,3,null,null,null,null,8,9,10]。

I thought I would do this by rending two line plots for each dataset. One with a dotted style and one with a solid style. To achieve this, I tried a POC to create a gap in my line plots.

我想我会通过为每个数据集重新绘制两个线图来做到这一点。一个带有虚线样式,另一个带有坚固的风格。为了达到这个目的,我尝试了一个POC来创建我的线图中的空白。

I thought I might do this by deleting elements in the data series before sending it to be rendered (http://jsfiddle.net/drewsonne/tczooff2/):

我想我可以通过在发送它之前删除数据系列中的元素来做到这一点(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];
}

But I seem to get an straight interpolated line in my graph where the removed elements are.

但我似乎在我的图表中得到了一条直线插值线,其中删除了元素。

Is it possible to render a partial line in RickshawJS, or any other method which would achieve my range styling?

是否可以在RickshawJS中渲染局部线,或任何其他可以实现我的范围样式的方法?

I appreciate I may even have to break the plots up into contiguous lines. This would require 3 different plots for my above example. If I do this, I still need to draw a partial plot. Any empty elements in a data set error out in rickshawjs.

我很欣赏我甚至可能不得不将这些情节分解成连续的线条。对于我上面的例子,这需要3个不同的图。如果我这样做,我仍然需要绘制局部情节。 rickshawjs中数据集中的任何空元素都会出错。

EDIT: Solution was to change my above code to remove the 'y' value only, while retaining the 'x' value:

编辑:解决方案是更改我的上面的代码只删除'y'值,同时保留'x'值:

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

1 个解决方案

#1

Don't know of it helps but I only found that you can end the line prematurely by setting a value to zero:

不知道它有什么帮助,但我发现你可以通过将值设置为零来提前终止该行:

seriesData[0][75] = 0;

results in red line being drawn only half the normal way.

导致红线仅被绘制为正常方式的一半。

Looks like gaps are supported only in some types of graphs: http://code.shutterstock.com/rickshaw/examples/gaps.html

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

#1