Mithril.js http://mithril.js.org/
C3.js : http://c3js.org
// 線チャートコンポーネント
var SequenceChart = {
controller: function() {
var ctrl;
ctrl = this;
ctrl.renderChart = function(data, element, isInit, context) {
// 初期化されていないなら、チャートを初期化
if(!isInit) {
ctrl.initChart(element, data);
}
};
ctrl.initChart = function(element, model) {
var chart, options;
options = {
data: {
columns: model
}
};
options.bindto = element;
chart = c3.generate(options);
};
},
view: function(ctrl, model) {
return m('div', {
// config属性でチャートを出力
config: ctrl.renderChart.bind(ctrl, model)
});
}
};
var model = [
['labelA', 10, 20, 30],
['labelB', 20, 30, 40]
]
m.mount(document.body, SequenceChart(model));