我正在使用gRaphael实现一个实时更新的线图,它是拉斐尔 SVG库的图形扩展。
我似乎找不到任何人这样做的例子,作为一个几乎实时更新项目,这是很好的。我假设有一种使用新数据集调用图形刷新的方法(不需要每次重新初始化一个全新的Raphael对象!),但问题就在这里:
在任何地方似乎都没有准确的文档。我发现了这个StackOverflow问题:Graphael线图,这反过来导致了这个文档项目:https://github.com/kennyshen/g.raphael/tree/master/docs,但是结果是冷的。使用所提供的示例,我遇到了一些错误:
r.g.linechart()不再有效(其中r是Raphael对象,我假设g是其中的gRaphael属性)。在此过程中的某个地方,一定有人已经切换到适当地扩展Raphael对象,以便r.linechart()工作。linechart()的参数不正确,再次导致未定义的错误。如果我只传入#x, #y, width, height, arrayX, arrayY参数并删除图表标签等,我可以呈现一条平行线。当然,我需要能够给我的斧头贴上标签,并提供一个传奇等等。不用说,一个没有API文档的库不会对任何人有多大的好处,但是有一些坚定的人愿意严格地通过阅读代码本身来学习。我不是那种人。我可能会做一个好的例子,最好是使用现场更新。
所以我想问题是:
linechart()接受的参数提供一个适当的分项吗?谢谢!
为了记录在案,我要说的是我到目前为止的距离:
var r = Raphael('line-chart');
// did NOT work -->
var linechart = r.g.linechart(
10,10,300,220,[1,2,3,4,5],[10,20,15,35,30],
{"colors":["#444"], "symbol":"s", axis:"0 0 1 1"}
);
// worked in a limited way, rendering a plain line with no visible labels/graph -->
var linechart = r.linechart(
10,10,300,220,[1,2,3,4,5],[10,20,15,35,30]
);发布于 2012-03-21 10:15:57
发布于 2013-02-04 20:38:23
我仍在努力学习拉斐尔本人,但以下是我一直使用的主要资源:http://g.raphaeljs.com/reference.html和相同的sans。
这里有一个小提琴,它几乎可以用敲除/gRaphael来完成更新的线性进程,prob不是最好的解决方案,但它是一个想法:http://jsfiddle.net/kcar/mHG2q/。
只是一个提示,直到我把阅读和尝试/错误结合起来(有很多错误),我才开始学习它,所以玩小提琴,看看事情是如何变化的。
但是它的基本代码如下:
//constructor
var lines = r.linechart(10, 10, width, height, xVals, yVals, { nostroke: false, axis: "0 0 1 1", symbol: "circle", smooth: true })
.hoverColumn(function () { //this function sets the hover tag effect
this.tags = r.set();
for (var i = 0, ii = this.y.length; i < ii; i++) {
this.tags.push(r.tag(this.x, this.y[i], this.values[i], 160, 10).insertBefore(this).attr([{ fill: "#fff" }, { fill: this.symbols[i].attr("fill") }]));
}
}, function () {
this.tags && this.tags.remove();
});
lines.symbols.attr({ r: 3 }); //this adjusts size of the point symbolshttps://stackoverflow.com/questions/9726887
复制相似问题