我目前正在处理一项想要在网站上显示条形图/表格的任务。
该应用程序使用:sproutcore(1.6)作为前端,Java Restful作为后端。
但是,我在 sproutcore 中找不到一些有用的图表库。对此有什么想法吗?
我在网站上搜索,我觉得谷歌图表工具相当不错,jFreechart作为后端也是一个不错的选择。
我不确定如何将其集成到萌芽核心中。
谢谢。
我正在使用Flot在我的Sproutcore应用程序上显示图表。
要使用它,您需要在框架文件夹中创建一个 flot 目录,其中包含 jquery.flot.js 文件(我还包含 jquery.flot.pie.js 文件)和一个包含以下内容的核心.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.[]'),
});
然后,您只需将数据和选项属性与数据绑定。