0

jqplot で円グラフを作成しようとしています。ここに何か欠けているかどうかはわかりませんが、チャートがまったくレンダリングされていません。

以下は、Rails の dashboard_controller のアクション メソッドの 1 つです。

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>

何が間違っている可能性がありますか？

4

1 に答える 1

0

何か不足していますか？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]);});

ここでフィドルを参照してください。

于 2012-08-29T13:42:04.037 に答える