1

私はRoRの初心者であり、データベースからのデータをグラフ化するグラフをRuby on Railsアプリケーション（rails-v3.2.2およびamchartsJavaScriptCharts -v 2.6.5を使用）で作成するためにamchartsを使用することを検討しています。Amchartsはフラッシュを使用しなくなりました（現在はJavascript / HTML5のみを使用しています）。そのため、私が見つけた統合チュートリアルは、古いバージョンのamcharts用です。

私の最初の質問は（高レベルの理解の質問）です-データベースからチャートにデータをロードするためにXMLまたは.CSVファイルを使用する必要がありますか、それともJavaScriptに埋め込まれたrubyを使用できますか？

私の2番目の質問-データベースからデータをプルしているRubyonRailsでamchartチャートを実装する方法のチュートリアルやサンプルコードを知っている人はいますか？

例えば：

国と値を含む円グラフが必要な場合。データベーステーブルの例：

create_table "countries", :force => true do |t|
t.string   "name"
t.integer  "litres"
t.datetime "created_at", :null => false
t.datetime "updated_at", :null => false
end

これがハードコードされたグラフです。埋め込まれたrubyを使用して、コードをハードコーディングする代わりにデータベースからデータをプルさせることはできますか？または、XMLファイルを作成する必要がありますか？データベースからのデータのプルをamchartsjavascriptコードに統合する方法についての洞察をいただければ幸いです。

<script type="text/javascript">
        var chart;
        var legend;

        var chartData = [{
            country: "Lithuania",
            value: 260
        }, {
            country: "Ireland",
            value: 201
        }, {
            country: "Germany",
            value: 65
        }, {
            country: "Australia",
            value: 39
        }, {
            country: "UK",
            value: 19
        }, {
            country: "Latvia",
            value: 10
        }];

        AmCharts.ready(function () {
            // PIE CHART
            chart = new AmCharts.AmPieChart();
            chart.dataProvider = chartData;
            chart.titleField = "country";
            chart.valueField = "value";
            chart.outlineColor = "#FFFFFF";
            chart.outlineAlpha = 0.8;
            chart.outlineThickness = 2;
            // this makes the chart 3D
            chart.depth3D = 15;
            chart.angle = 30;

            // WRITE
            chart.write("chartdiv");
        });
    </script>
4

3 に答える 3

1

個人的には Highcharts Highcahrts の使用をお勧めします。ハイチャートにデータをロードする機能を提供する完全な API ドキュメントがあります。http://www.highcharts.com/demo/pie-basicでお探しの円グラフの例を次に示します。次のようなことを試すことができます。

コントローラ

def index
 @title = "Country" 
 @country = Country.all 
 @data = []

 Country.all.each do |country| 
   countryData = { :CountryName => country.country.to_s, 

   :values => [] } 

 ['England', 'France', 'Italy', 'Spain','Germany'].each do |NameOfCountry|
  end 

  @data.push(countryData) #Push this data back to the variable countryData.
end

終わり

意見

ハイチャートを使用する場合、おそらくこれに似た基本的なものがあるでしょう:

  series: [{
                type: 'pie',
                name: 'Browser share',
                data: [
                    ['Firefox',   45.0],
                    ['IE',       26.8],

ただし、上記は単なる生の静的データです。私が提供したもののいくつかを取ると、次のようなことがうまくいくでしょう：

name: '<%= data[ :CountryName] %>',
data: [<% data[ :values ].each do |value| %>
        <%= value %>,
    <% end %>]

ここでできることは、CountryName のデータと入力した値を解析することです。これがお役に立てば幸いです。

あなたの質問に答えて、必ずしも XML または CSV データを使用する必要はありません。通常、データをロードするために JSON または XML を使用します。

于 2012-03-29T09:20:07.633 に答える
1

Ruby コードを使用してデータをプルし、必要な Javascript をビュー内に出力するだけで非常に簡単にできますが、これは特に複雑なデータ構造で構築するのが面倒な場合があります。

別の JSON 部分ビューを使用して、 JBuilderを使用してグラフのデータを出力することをお勧めします。JSON 応答を構築したら、グラフ内に出力するだけです。

# controller
@data = Country.all

# partial  "_data.json.erb"
<%=
  Jbuilder.encode do |json|
      json.countries @data do |json, country|
        json.country country.name
        json.value country.litres
      end 
  end
%>

# view
var chartData = <%= render :partial => "data", :format => :json, :locals => @data %>

また、私が見つけた amchart の宝石があり、それは 3 年以上触れられていないようですhttps://github.com/ahobson/ambling

于 2012-03-29T03:21:38.487 に答える