рабочие гистограммы/таблицы с sproutcore

Question

В настоящее время я работаю над задачей, которая хочет отображать гистограммы/таблицы на веб-сайте.

Приложение использует: sproutcore (1.6) в качестве front-end, Java Restful as backend.

Однако я не могу найти полезную библиотеку для диаграмм в sproutcore. Есть ли идеи для этого?

Я ищу на веб-сайте, я считаю, что инструменты диаграммы google хороши, а также jFreechart как бэкэнд также является хорошим выбором.

Я не уверен, как интегрировать это в sproutcore.

Спасибо.

Answer 1

Я использую Flot для отображения диаграмм на моем приложении Sproutcore.

Чтобы использовать его, вам необходимо создать каталог флота в папке фреймворков, в которую будет входить файл 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'] 

для отображения графики в вашем приложении, вы можете использовать этот пользовательский вид, что я сделал для работы с Флотом:

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.[]'), 

}); 

Затем вам нужно привязать данные и свойства параметров к вашим данным.