Точечная диаграмма в данных gRaphael не отображается в приложении Rails - PullRequest
0 голосов
/ 08 февраля 2011

Я новичок в gRaphael и не хардкорный разработчик JS, способный распаковать исходный код, и кажется, что нет никаких документов о том, как правильно его использовать.

Я хочу, чтобы в моем приложении работала точечная диаграмма, но я не совсем понимаю, как значения x и y рисуют точки на холсте диаграммы.

IИспользовал демо на 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> 

Фредерико, можете ли вы тогда объяснить, почему эта диаграмма ничего не показывает на экране?Если ваше объяснение выполнено, то каждая из 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>

Но ничего не отображается.Это проблема, с которой я сталкиваюсь со своими данными, которые примерно совпадают с данными в этом жестко закодированном скрипте.Итак, как мне сделать так, чтобы данные в исходном выводе (см. Вопрос) отображались правильно, как вы думаете?

1 Ответ

1 голос
/ 08 февраля 2011

Я не знаком с Ruby on Rails, но я знаю кое-что о графе, в частности ... о существовании неофициальных документов.

Вы можете попробовать прочитать неофициальные документы здесь , или посмотрите другие примеры использования точечных диаграмм здесь .

Надеюсь, что это поможет, удачи!

Обновление

По сути это так:

Вы используете значения x иЗначения массивы для размещения каждой точки по оси, y координаты в точечной диаграмме.Например, посмотрите пример простой точки , и вы заметите, что шестой параметр (значения y) является массивом [220, 220, 220, 220, 220], если вы измените одно из этих значений на 0, вы заметите, какостальные точки подняты над цифрой 0 для значения y.

То же самое относится и к 5-му параметру (значения x), вы можете использовать его для размещения точки в любом месте графика вдоль оси X(вы заметите, что в примере массив значений x состоит из чисел 5, 10, 15 и т. д. ...

Наконец, вы используете седьмой параметр (данные), чтобы дать каждой точке значение (который представлен в радиусе и цвете точки, если вы установите его для этого).

Имея это в виду, каждая точка на графике отображается с использованием трех чисел:

  • xcoordenate
  • y coordenate
  • значение

Итак, если вы посмотрите на официальный пример точечной диаграммы , вы заметите, какзначения х от 0 до 23 (представляют 24 часа дня), значения у - числа от 17 повторяется 24 раза (чтобы поместить каждую последовательность точек в соответствующий день), и, наконец, данные представляют ... ну ... что-то подсчитано в этот час этого дня:).

Вы можете использовать осьметки, чтобы сделать диаграмму более понятной, как в демонстрации.

...