4

我正在使用gRaphael实现实时更新线图，它是Raphael SVG 库的图形扩展。

我似乎找不到任何人这样做作为近实时更新项目的例子，这很好。我假设有一种方法可以使用新数据集在图形上调用刷新（无需每次都重新初始化一个全新的 Raphael 对象！），但问题在于：

任何地方似乎都没有准确的文档。我发现了这个 StackOverflow 问题：Graphael line chart这又导致了这个文档项目：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()将接受的参数的适当分项吗？

谢谢！

为了记录，这是我到目前为止的距离：

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]
);
4

2 回答 2

2

我仍在尝试自己学习 Raphael，但这里是我一直在使用的主要资源：http: //g.raphaeljs.com/reference.html，同样没有“g”。

这是一个小提琴，它几乎可以通过敲除/gRaphael 拉出更新线图，可能不是最好的解决方案，但它是一个想法：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 symbols
于 2013-02-04T20:38:23.570 回答
0

GitHub 中有一个fork 正在处理文档和示例。

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

我还发现了这个带有一些示例的小帖子。

于 2012-03-21T10:15:57.627 回答