Stack Overflow 信誉图 (Flot) 的文档

发布于 2024-09-15 09:57:19 字数 780 浏览 8 评论 0原文

是否有任何文档可用于构建与 Stack Overflow 中类似的 Flot 图 profile/reputation选项卡？

从源代码中我可以看到数据是在这个地址查询的：/users/rep-graph/341106/" + Ranges.xaxis.from.toFixed(1) + "/" + Ranges.xaxis.to。 (1) 但我不知道 URL 中可以接受 from 和 to 字段的值。

toFixed 编辑：

alt text

在此图中，我们可以看到有两个点突出显示，结果是侧面列出了两个问题，这意味着绘制的值与用户定义的数据链接，

但是，如果我考虑 pkh 的示例，则只有点。（和标签）提供给Flot：

label: "United States",
        data: [[1990, 18.9], [1991, 18.7] ....

所以我想看看：

如何将数据与点链接
如何根据图形选择更新面板[但也许这部分实际上不是由Flot本身完成的]

原文

is there any documentation available to build Flot graph similar to what we can find in the Stack Overflow profile/reputation tab?

from the source code I can see that data is queried at this address: /users/rep-graph/341106/" + ranges.xaxis.from.toFixed(1) + "/" + ranges.xaxis.to.toFixed(1) but I don't know the values from and to fields in the URL can accept.

EDIT:

alt text

In this graph, we can see that two points are highlighted, and the result is that two question are listed on the side, which means that the plotted values are linked with user-defined data.

However, if I consider pkh's example, only the points (and a label) are provided to Flot:

label: "United States",
        data: [[1990, 18.9], [1991, 18.7] ....

So I'd like to see:

how to link data with points
how to update a panel according to graph selection [but maybe this part is not actually done by Flot itself]

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

咽泪装欢 2024-09-22 09:57:20

看起来他们正在使用 flot 的选择插件。这是其使用的基本示例。

ranges 是 plotselected 处理程序的参数，因此 from 和 to 可以是给定的任何有效值轴。（可以沿 x、y 或 (x 和 y) 轴进行选择。）

回复收藏 0 原文

扮仙女 2024-09-22 09:57:19

在本例中，他们通过 URL 传回 Javascript 时间戳。

因此，在后端，他们必须执行类似的操作（伪代码）：

//get parameters from URL, non-rails people would just use POST or GET variables
$from = $_GET['from']
$to = $_GET['to']

//convert to timestamps in your language
$from = $from/1000
$to = $to/1000

//query your data source with these time-based restrictions
//return a JSON data set with the given restrictions, linking the known timestamps to labels

对于第二个问题，让服务器端返回一个关联数组，将时间戳链接到数据对象，在本例中包含 Gain、Loss、Url ，标题。在成功回调中，您将显示它们。下面是一个示例数据对象：

{ 1274774400000 : {
       Gain:0,
       Loss:10,
       Url:'http://asdf.com',
       Title:'We lost some rep here... boohoo'
    },
  1274947200000 : {
       Gain:10,
       Loss:0,
       Url:'http://asdf.com',
       Title:'We gained some rep here... woo!'
    }
}

您可以看到这种类型的对象在您引用的页面的 showReputation 函数中使用...只不过它们返回的是 JSON 数组而不是对象。

给定上述数据对象，您可以轻松添加另一个功能：plotclick 事件，当单击给定数据点时突出显示该事件。

In this case, they are passing Javascript timestamps back via the URL.

So on the backend side, they must be doing something like this (pseudocode):

//get parameters from URL, non-rails people would just use POST or GET variables
$from = $_GET['from']
$to = $_GET['to']

//convert to timestamps in your language
$from = $from/1000
$to = $to/1000

//query your data source with these time-based restrictions
//return a JSON data set with the given restrictions, linking the known timestamps to labels

For your 2nd question, have your server-side return an associative array, linking the timestamp to a data object, which in this case contains Gain,Loss,Url,Title. In the success callback, you display them. Here's an example data object:

{ 1274774400000 : {
       Gain:0,
       Loss:10,
       Url:'http://asdf.com',
       Title:'We lost some rep here... boohoo'
    },
  1274947200000 : {
       Gain:10,
       Loss:0,
       Url:'http://asdf.com',
       Title:'We gained some rep here... woo!'
    }
}

You can see this type of object being used in the showReputation function in the page you referenced... except they returned a JSON array instead of an object.

Another feature you could easily add given the above data object: a plotclick event that highlights the given data point when the click it.

回复收藏 0 原文

~没有更多了~