我是gRaphael的新手，而不是一个能够解开源代码的硬核JS开发者，而且似乎没有关于如何正确使用它的零文档。
我很想在我的应用上获得点图并运行，但我对于x和y值如何在图表画布上绘制点感到困惑。
我一直在使用http://g.raphaeljs.com/dotchart.html上的演示作为图表的基础。但是，当我修改数据集时，我会丢失图表中的所有点。
我不认为我理解画布中点与x和y之间的关系。
有人可以告诉我如何在下面的代码中包含我从数据库返回的数据吗？
返回的数据是一个包含23个元素的数组，范围从8到56.
<script type="text/javascript" charset="utf-8">
window.onload = function () {
var r = Raphael("holder2"),
xs = <%= chart_xs(@weeks) %>,
ys = <%= chart_ys(@weeks) %>,
data = <%= chart_data(@weeks) %>,
axisy = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
axisx = ["12am", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12pm", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"];
r.g.txtattr.font = "11px 'Fontin Sans', Fontin-Sans, sans-serif";
r.g.dotchart(10, 10, 620, 260, xs, ys, data, {
symbol: "o",
max: 10,
heat: true,
axis: "0 0 1 1",
axisxstep: 23,
axisystep: 6,
axisxlabels: axisx,
axisxtype: " ",
axisytype: " ",
axisylabels: axisy
}).hover(function () {
this.tag = this.tag || r.g.tag(this.x, this.y, this.value, 0, this.r + 2).insertBefore(this);
this.tag.show();
}, function () {
this.tag && this.tag.hide();
});
};
</script>
输出如下：
<script type="text/javascript" charset="utf-8">
window.onload = function () {
var r = Raphael("holder2"),
xs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
ys = [220, 220, 220, 220, 220, 220, 220, 220, 220, 220, 220, 220, 220, 220, 220, 220, 220, 220, 220, 220, 220, 220, 220],
data = [20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20],
axisy = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
axisx = ["12am", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12pm", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"];
r.g.txtattr.font = "11px 'Fontin Sans', Fontin-Sans, sans-serif";
r.g.dotchart(10, 10, 620, 260, xs, ys, data, {symbol: "o", max: 10, heat: true, axis: "0 0 1 1", axisxstep: 23, axisystep: 6, axisxlabels: axisx, axisxtype: " ", axisytype: " ", axisylabels: axisy}).hover(function () {
this.tag = this.tag || r.g.tag(this.x, this.y, this.value, 0, this.r + 2).insertBefore(this);
this.tag.show();
}, function () {
this.tag && this.tag.hide();
});
};
</script>
Frederico，你能解释一下为什么这个图表在屏幕上什么也没显示？如果您的解释成立，那么23个数据点中的每一个都应该在画布上的连续线上表示：
<script type="text/javascript" charset="utf-8">
window.onload = function () {
var r = Raphael("holder"),
xs = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
ys = [7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7],
data = [294, 300, 204, 255, 348, 383, 334, 217, 114, 33, 44, 26, 41, 39, 52, 17, 13, 2, 0, 2, 5, 6, 64],
axisy = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
axisx = ["12am", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12pm", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"];
r.g.txtattr.font = "11px 'Fontin Sans', Fontin-Sans, sans-serif";
r.g.dotchart(10, 10, 620, 260, xs, ys, data, {symbol: "o", max: 10, heat: true, axis: "0 0 1 1", axisxstep: 23, axisystep: 6, axisxlabels: axisx, axisxtype: " ", axisytype: " ", axisylabels: axisy}).hover(function () {
this.tag = this.tag || r.g.tag(this.x, this.y, this.value, 0, this.r + 2).insertBefore(this);
this.tag.show();
}, function () {
this.tag && this.tag.hide();
});
};
</script>
但没有显示任何内容。这是我对数据的问题，这与这个硬编码脚本中的数据大致一致。那么如何在我的原始输出（请参阅问题）中获取数据以正确显示？
答案 0 :(得分：1)
我不熟悉Ruby on Rails，但我确实知道关于graphael的一两件事，特别是......关于非官方文档的存在。
您可以尝试阅读unnofficial docs here，或查看其他examples on using dot charts here。
希望有所帮助，祝你好运！
<强>更新
本质上就是这样：
使用valuesx和valuesy数组将每个点放在点图中的x，y coordenate中。例如，请参阅the simple dot example，您会注意到第6个参数（y值）是一个数组[220, 220, 220, 220, 220]，如果您将其中一个值更改为0，您会注意到其余的如何对于y值，点数高于0。
对于第5个参数（x值）也是如此，您可以使用它在图表中的任何位置沿X轴放置一个点（您将注意到x值数组如何由数字组成5 ，10,15等......
最后，您使用第7个参数（数据）为每个点赋予一个值（如果您为此设置，则以点的半径和颜色表示）。
考虑到这一点，图表中的每个点都使用三个数字进行渲染：
所以，如果你回顾一下official dot chart example，你会注意到x值是如何从0到23（表示一天中的24小时），y值是从1到7重复的数字24次（将每个序列的点放在相应的日子里），最后数据代表......好吧......在那天的那个小时计算的东西:)。
您可以使用轴标签使图表更易于理解，就像在演示中一样。