1

現在、ウェブサイトに棒グラフ/表を表示したいタスクに取り組んでいます。

アプリケーションは、フロントエンドとしてsproutcore（1.6）、バックエンドとしてJavaRestfulを使用しています。

ただし、sproutcoreでチャートに役立つライブラリが見つかりません。そのためのアイデアはありますか？

私はウェブサイトで検索しますが、グーグルチャートツールはかなり良いと思います。バックエンドとしてのjFreechartも良い選択です。

それをsproutcoreに統合する方法がわかりません。

ありがとう。

4

1 に答える 1

2

Flotを使用してSproutcoreアプリにグラフを表示しています。

これを使用するには、frameworksフォルダー内にflotディレクトリーを作成する必要があります。このディレクトリーには、jquery.flot.jsファイル（jquery.flot.pie.jsファイルも含まれています）と、次の内容のcore.jsファイルが含まれます。

sc_require('jquery.flot.js');
sc_require('jquery.flot.pie.js');

Flot = SC.Object.create({
  plot: $.plot
}) ;

次に、この新しいライブラリをビルドファイルに追加する必要があります。

config :yourapp,  
  :required => ['flot']

アプリでグラフを表示するには、Flotで使用するために作成した次のカスタムビューを使用できます。

GX.FlotView = SC.View.extend({
  classNames: ['flot'],

  //ex: [{ data: [[1326366000000, 1500], [1326452400000, 600]], label: 'title of the serie' }, ...]
  data: [],

  /* 
  ex: {
    legend: { show: true },
    series: line, points,
    xaxis: { mode: "time", timeformat: "%d/%m/%y", }
    grid: { backgroundColor: { colors: ["#FFF", "#fefefe"]}},
  } 
  */
  options: [],


  render: function(context, firstTime) { 
    var frame = this.get('frame'),
        data = this.get('data'), 
        options = this.get('options');

    // To avoid an error with flot, we check if width and height > 0
    if(frame.width > 0 && frame.height > 0 && data && data.length) {  
      var layer = this.get('layer'),
          plot = Flot.plot(layer, data, options);
    }
  },


  viewDidResize: function() {
    this.invokeLast(function() {
      if (this.get('isVisibleInWindow')) this.set('layerNeedsUpdate', YES);
    });
  }.observes('data', 'data.[]'),

});

次に、データとオプションのプロパティをデータにバインドする必要があります。

于 2012-05-23T14:54:57.970 に答える