样式线图与RickshawJS中的范围(Style line graph with ranges in RickshawJS)

编程入门行业动态更新时间:2024-10-11 19:14:54

我正在尝试构建一个图形系统，其中在一个范围内的线图是虚线，超出或未达到范围的线图是用实线绘制的。也就是说，在下面的数组[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] 。

我想我会通过为每个数据集重新绘制两个线图来做到这一点。一个带有虚线样式，另一个带有坚固的风格。为了达到这个目的，我尝试了一个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; }

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].

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.

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

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?

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.

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

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