gRaphael數據中的點陣圖表不顯示在Rails應用程序中

Question

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

---

弗雷德里科，然後可以你解釋爲什麼這圖表在屏幕上什麼也不顯示如果你的解釋成立，那麼每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並不熟悉，但我確實知道關於graphael的一兩件事，特別是......關於非官方文檔的存在。

您可以嘗試閱讀unnofficial docs here或查看其他examples on using dot charts here。

希望有所幫助，祝你好運！

更新

它在本質上是這樣的：

您使用valuesx和valuesy陣列放置在X每個點，Y coordenate點圖表英寸例如，請參見the simple dot example，您會注意到第六個參數（y值）是一個數組[220, 220, 220, 220, 220]，如果將其中一個值更改爲0，您會注意到其餘點是如何通過0爲y值。

對於第5個參數（x值）也是如此，您可以使用它在圖表中的任意位置沿X軸放置一個點（您會注意到x值數組由數字組成5，10，15等......

最後，您使用第7個參數（數據）爲每個點提供一個值（如果爲此設置了該值，則以點的半徑和顏色表示）。

考慮到這一點，圖中每一個點是用三個數字呈現：

• X coordenate
• Ÿcoordenate
• 值

所以，如果你回頭看看official dot chart example，你會注意到x的值是如何從0到23（表示一天中的24小時），y值是從1到7重複24次的數字（把每個點序列放在它的c或相應的一天），最後數據代表......好的......在那一天的那個時刻計算出的東西:)。

您可以使用軸標籤使圖表更容易理解，就像在演示中一樣。