帶有sproutcore的工作條形圖/表格

Question

我目前正在研究一項要在網站上顯示條形圖/表格的任務。

該應用程序使用：sproutcore（1.6）作爲前端，Java Restful作爲後端。

但是，我找不到一些有用的圖表在sproutcore圖表。有什麼想法嗎？

我在網站上搜了一下，覺得google的圖表工具挺好的，jFreechart作爲後端也是不錯的選擇。

我不知道如何將它整合到sproutcore。

謝謝。

Answer 1

我正在使用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.[]'), 

}); 

然後，您只需將數據和選項屬性與數據綁定即可。