gRaphaelデータのドットグラフがRailsアプリケーションに表示されない

Question

gRaphaelには新しく、ハードコアJS開発者はソースコードを解凍できません。正しく使用する方法についてはゼロドキュメントがあります。

私は自分のアプリでドットチャートを稼働させたいと思っていますが、x値とy値がどのようにチャートキャンバスにドットを描くのか混乱しています。

グラフの基礎としてhttp://g.raphaeljs.com/dotchart.htmlでデモを使用しています。しかし、私がデータセットを変えると、チャートからすべてのドットが失われます。

キャンバスにドットとxとyの関係を理解し​​ているとは思いません。

データベースから返されたデータを以下のコードに含める方法について教えてもらえますか？

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

---

フェデリコ、なぜこのあなたがして説明することができます：

データが返さは8から56までの範囲で23個の要素、

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

このような出力を持つ配列でありますチャートには何も表示されませんか？あなたの説明が成り立つ場合には、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> 

しかし、何も表示されません。これは私がこのハードコーディングされたスクリプトのデータと大まかに揃っている自分のデータを持っている問題です。では、元の出力（質問参照）のデータを正しく表示するにはどうすればよいですか？

Answer 1

私はRuby on Railsに慣れていませんが、特に非公式のドキュメントの存在について、グラファエルについて何かを知っています。

unnofficial docs hereをお試しいただくか、examples on using dot charts hereをご覧ください。

希望、幸運を願って！

更新

本質的にはそれがこのようなものです：

あなたはXの各ドットを配置するvaluesxとvaluesy配列を使用し、ドットチャートのY coordenate。たとえば、the simple dot exampleを参照してください。そして、6番目のパラメータ（y値）が配列[220, 220, 220, 220, 220]であることに気づくでしょう。これらの値の1つを0に変更すると、残りのドットが0 y値の場合

5番目のパラメータ（x値）についても同じことが言えますが、グラフのどこにでもX軸に沿ってドットを配置するために使用できます（例ではx値の配列は数値で構成されています

最後に、7番目のパラメータ（データ）を使用して、各ドットに値を設定します（これを設定すると、ドットの半径と色で表されます）。あなたが戻って見れば、

ので

• X coordenate
• のy coordenate
• 値：念頭に置いて
  、チャート内の各ドットは3つの数値を使用してレンダリングされますofficial dot chart exampleでは、x値が0〜23（24時間表示）、y値が1〜7の数字が24回繰り返されていることに気づくでしょう（ドットの各シーケンスをcその日のその時間に数えられた何か:)。

  軸ラベルを使用すると、デモと同様にチャートをよりわかりやすくすることができます。