使用 sproutcore 工作的条形图/表格答案

【问题标题】：working bar charts/tables with sproutcore使用 sproutcore 工作的条形图/表格
【发布时间】：2012-04-16 04:41:13
【问题描述】：

我目前正在处理一项想要在网站上显示条形图/表格的任务。

应用程序使用：sproutcore (1.6) 作为前端，Java Restful 作为后端。

但是，我在 sproutcore 中找不到一些有用的图表库。有什么想法吗？

我在网站上搜索了一下，感觉google的图表工具还不错，另外jFreechart作为后端也是不错的选择。

我不确定如何将它集成到 sproutcore。

谢谢。

【问题讨论】：

标签： jfreechart google-visualization sproutcore bar-chart

【解决方案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.[]'),

});

然后，您只需将数据和选项属性与您的数据绑定即可。

【讨论】：