0

我是 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>

但什么都没有显示。这是我的数据遇到的问题，它与这个硬编码脚本中的数据大致对齐。那么，您认为如何正确显示原始输出中的数据（请参阅问题）？

4

1 回答 1

1

我对 Ruby on Rails 不熟悉，但我确实对 graphael 有所了解，尤其是……关于非官方文档的存在。

您可以尝试在此处阅读非官方文档，或在此处查看有关使用点图的其他示例。

希望对你有帮助，祝你好运！

更新

本质上是这样的：

您使用 valuesx 和 valuesy 数组将每个点放置在点图中的 ax,y 坐标中。例如，查看简单的点示例，您会注意到第 6 个参数（y 值）是一个数组[220, 220, 220, 220, 220]，如果将其中一个值更改为 0，您会注意到其余的点是如何升高到一个以上的y 值为 0。

第 5 个参数（x 值）也是如此，您可以使用它在图表中沿 X 轴的任何位置放置一个点（您会注意到在示例中 x 值数组是如何由数字 5、10、 15等...

最后，您使用第 7 个参数（数据）为每个点指定一个值（如果您为此设置，则以点的半径和颜色表示）。

考虑到这一点，图表中的每个点都使用三个数字呈现：

  • x 坐标
  • y 坐标
  • 价值

因此，如果您回顾官方点图示例，您会注意到 x 值是如何从 0 到 23（代表一天中的 24 小时），y 值是从 1 到 7 重复 24 次的数字（到将每个点序列放在相应的日期），最后数据代表......嗯......在当天的那个小时计算的东西:)。

您可以使用轴标签使图表更易于理解，就像在演示中一样。

于 2011-02-08T04:04:57.363 回答