5

情報をグラフに表示するために Google ビジュアライゼーション チャートを使用したいと考えています。

グラフに値を設定する JavaScript 関数は次のようになります。

function drawLineChart(chartType) {

    if(chartType == undefined) {
        chartType = 'data1';
    }

    var data = {
        data1: [
            ['Year', 'Sales', 'Expenses'],
            ['2004',  1000,      400],
            ['2005',  1170,      460],
            ['2006',  660,       1120],
            ['2007',  1030,      540]
        ]
    };

    ...
}

私の問題は、このような配列にデータベースからの値を入力する方法がわからないことです-何かヒントはありますか?

どうもありがとう

4

3 に答える 3

4

JavaScript を erb に埋め込む必要があります。ファイルに名前を付けると、JavaScript から erb を介してロジックchart.js.erbにアクセスできるようになります。Modelこの方法の欠点は、静的にコンパイルされたアセットではなく、すべてのページ ビューで JavaScript をコンパイルする必要があることです。これにより、ページの読み込み時間が遅くなる可能性があり、これがトラフィックの多いページになる場合は、別のルートを探す必要があります。

例

chart.js.erb

function drawLineChart(chartType) {

  if(chartType == undefined) {
    chartType = 'data1';
  }

  var data = {
    data1: [
      <%= Model.all.map { |m| [m.year, m.sales, m.expenses] }.unshift(['Year', 'Sales', 'Expenses']) %>
    ]
  };

  ...
}

または、API コントローラーを介してページの読み込み時に配列を設定する AJAX 要求を作成することもできます。この方法では、アセットを静的にコンパイルできますが、もう少し複雑です。

于 2013-09-16T15:41:33.563 に答える
2

「データ」属性を使用できます。

# statistics.js.coffee
jQuery ->
  data = {
    labels : $("#orders_chart").data('dates'),
    datasets : [
      {
        fillColor : "rgba(220,220,220,0.5)",
        strokeColor : "rgba(220,220,220,1)",
        pointColor : "rgba(220,220,220,1)",
        pointStrokeColor : "#fff",
        data : $("#orders_chart").data('orders')
    }
  ]
}

ordersChart = new Chart($("#orders_chart").get(0).getContext("2d")).Line(data)

#statistics/index.html.erb
<%= content_tag 'canvas', '', id: 'orders_chart', width: '1000', height: '600', data: {orders: (Order.week_ago.map &:total), dates: (Order.week_ago.map &:created_at)} %>
于 2013-12-16T18:58:56.767 に答える