jqplot使用軌道不呈現餅圖

Question

我想在jqplot中創建一個餅圖。我不確定我是否在這裏丟失了任何東西，但圖表根本沒有渲染。

下面是Rails中的dashboard_controller我的操作方法之一：

def index 
    @trans = Transaction.joins(:category).group("categories.name").sum(:amount) 
    respond_to do |format| 
     format.html # index.html.erb 
     format.json { render json: @trans } 
    end 
end 

這裏是JSON數據執行的操作方法後，我得到了。

{"Bills & Utilities":1019.11,"Uncategorized":196.57,"Home":30.29,"Entertainment":300.0,"Food & Dining":465.45,"Personal Care":63.92,"Auto & Transport":571.44} 

這是我的HTML和JavaScript

<script type="text/javascript" src="/assets/jqplot/jqplot.js"></script> 
<script type="text/javascript" src="/assets/jqplot/plugins/jqplot.pieRenderer.min.js"></script> 
<script type="text/javascript" src="/assets/jqplot/plugins/jqplot.ciParser.js"></script> 
<script type="text/javascript" src="/assets/jqplot/plugins/jqplot.json2.js"></script> 
<link rel="stylesheet" type="text/css" href="/assets/jqplot/jqplot.css" /> 

<div id="chart10" style="margin-top:20px; margin-left:20px; width:460px; height:300px;"></div> 

<script class="code" type="text/javascript"> 
    $(document).ready(function() { 
     $.getJSON('/dashboard/index.json', function(data){ 
      //var data = [['Heavy Industry', 12],['Retail', 9], ['Light Industry', 14]]; 
      plot = jQuery.jqplot('chart10', data, { 
       title: ' ', 
       //dataRenderer: $.jqplot.ciParser, 
       seriesDefaults: { 
        shadow: true, 
        renderer: $.jqplot.PieRenderer, 
        rendererOptions: { 
         fill: false, 
         sliceMargin: 4, 
         showDataLabels: true 
         } 
       }, 
       legend: { show:true } 
      }); 
     }); 
    }); // document.ready 
</script> 

任何想法可能是錯誤的？

Answer 1

我錯過了什麼？您的JSON返回變量data看起來是這樣的：

{"Bills & Utilities":1019.11,"Uncategorized":196.57,"Home":30.29,"Entertainment":300.0,"Food & Dining":465.45,"Personal Care":63.92,"Auto & Transport":571.44} 

雖然jqPlot希望它是這樣的：

[["Bills & Utilities",1019.11],["Uncategorized",196.57],["Home",30.29],["Entertainment",300.0],["Food & Dining",465.45],["Personal Care",63.92],["Auto & Transport":571.44]] 

編輯發表評論

把數據以正確的格式：

data = {"Bills & Utilities":1019.11,"Uncategorized":196.57,"Home":30.29,"Entertainment":300.0,"Food & Dining":465.45,"Personal Care":63.92,"Auto & Transport":571.44}; 

jqData = [] 
$.each(data, function(k,v){jqData.push([k,v]);}); 

看fid dle here。