首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Graphael文件、最近的样品等

Graphael文件、最近的样品等
EN

Stack Overflow用户
提问于 2012-03-15 19:36:40
回答 2查看 4.4K关注 0票数 4

我正在使用gRaphael实现一个实时更新的线图,它是拉斐尔 SVG库的图形扩展。

我似乎找不到任何人这样做的例子,作为一个几乎实时更新项目,这是很好的。我假设有一种使用新数据集调用图形刷新的方法(不需要每次重新初始化一个全新的Raphael对象!),但问题就在这里:

在任何地方似乎都没有准确的文档。我发现了这个StackOverflow问题:Graphael线图,这反过来导致了这个文档项目:https://github.com/kennyshen/g.raphael/tree/master/docs,但是结果是冷的。使用所提供的示例,我遇到了一些错误:

  1. 示例中使用的语法r.g.linechart()不再有效(其中r是Raphael对象,我假设g是其中的gRaphael属性)。在此过程中的某个地方,一定有人已经切换到适当地扩展Raphael对象,以便r.linechart()工作。
  2. 传递给linechart()的参数不正确,再次导致未定义的错误。如果我只传入#x, #y, width, height, arrayX, arrayY参数并删除图表标签等,我可以呈现一条平行线。当然,我需要能够给我的斧头贴上标签,并提供一个传奇等等。

不用说,一个没有API文档的库不会对任何人有多大的好处,但是有一些坚定的人愿意严格地通过阅读代码本身来学习。我不是那种人。我可能会做一个好的例子,最好是使用现场更新。

所以我想问题是:

  1. 有没有人比我所链接的文档更了解文档?
  2. 有人能给我举个例子吗?文档失败了?
  3. 有人能为linechart()接受的参数提供一个适当的分项吗?

谢谢!

为了记录在案,我要说的是我到目前为止的距离:

代码语言:javascript
复制
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]
);
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-03-21 10:15:57

有一个用于编写文档和示例的GitHub中的叉。

您将需要下载的代码并从您的计算机查看它。这是一项正在进行的工作,但它比您在官方g.Raphael页面中所能找到的要多。

我还找到了一些例子的小帖子。

票数 0
EN

Stack Overflow用户

发布于 2013-02-04 20:38:23

我仍在努力学习拉斐尔本人,但以下是我一直使用的主要资源:http://g.raphaeljs.com/reference.html和相同的sans。

这里有一个小提琴,它几乎可以用敲除/gRaphael来完成更新的线性进程,prob不是最好的解决方案,但它是一个想法:http://jsfiddle.net/kcar/mHG2q/

只是一个提示,直到我把阅读和尝试/错误结合起来(有很多错误),我才开始学习它,所以玩小提琴,看看事情是如何变化的。

但是它的基本代码如下:

代码语言:javascript
复制
//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 symbols
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/9726887

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档