私はプログラマーではなく、理解しやすいので、Extjs 4 MVC アーキテクチャを利用することにしました。Extjs 4 と jquery Flot ライブラリを使用して、シリアル ポートに接続されている arduino からのセンサー データを表示およびログに記録しています。現在、センサー データを json ファイルに書き込むスクリプトがあります。
これが私のapp.jsです
Ext.Loader.setConfig({ enabled: true });
Ext.application({
requires: ['BC.view.chart.Chart', 'Ext.layout.container.Border', 'BC.view.chart.Flot'],
name: 'BC',
appFolder: 'app',
controllers: ['Chart'],
launch: function() {
Ext.create('Ext.container.Viewport', {
defaults: {
collapsible: false,
bodyStyle: 'padding:15px'
},
layout: 'border',
items: [{
title: 'Navigation',
preventHeader: 'true',
region:'west',
margins: '5 0 0 0',
cmargins: '5 5 0 0',
width: 150,
},{
region : "center",
title : "Center Region",
preventHeader: 'true',
layout: 'fit',
collapsible: false,
xtype : "tabpanel",
defaults: {bodyStyle: 'padding: 10px;'},
items : [ {
xtype: 'chart',
title: 'Chart'
}, {
xtype: 'panel',
title: 'Tab2',
html : 'Content will go here'
},{
xtype: 'panel',
title: 'Tab 3',
html : 'Content will go here',
}],
activeTab : 0
}
]
});
}
});
これは私のJSONデータです:
{"data": [[1354653278712.012, 187.0], [1354653279619.884, 173.0], [1354653280619.664, 163.0], [1354653281619.913, 155.0]], "label": "Temp1"},{"data": [[1354653278712.041, 368.0], [1354653279619.907, 343.0], [1354653280619.749, 325.0], [1354653281619.938, 311.0]], "label": "Temp2"}
モデルは次のとおりです。
Ext.define('BC.model.Chart', {
extend: 'Ext.data.Model',
fields: ['data', 'label']
});
店舗はこちら：
Ext.define('BC.store.Chart', {
extend: 'Ext.data.Store',
model: 'BC.model.Chart',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'data/users.json',
reader: {
type: 'json',
model: 'BC.model.Chart'
}
}
});
コントローラーは次のとおりです。
Ext.define('BC.controller.Chart', {
extend: 'Ext.app.Controller',
stores: ['Chart'],
models: ['Chart']
});
これは Flot のラッパーです (ここから: ExtJS 4 の株価チャート):
Ext.define('BC.view.chart.Flot', {
extend: 'Ext.Component',
alias: 'widget.flot',
/**
* @cfg {number[][]} data The data to be drawn when it gets rendered
*/
data: null,
/**
* @cfg {object} flotOptions
* The options to be passed in to $.plot
*/
flotOptions: null,
/**
* @property
* The Flot object used to render the chart and to manipulate it in the future. It will only
* be available after the first resize event
* You may not set this property but you are free to call methods on it
*/
flot: null,
initComponent: function (rerenderGraph) {
this.callParent(arguments);
// The only time that we're guaranteed to have dimensions is after the first resize event
this.on('resize', function(comp) {
if (!this.flot) {
this.flot = $.plot(this.getTargetEl().dom, this.data, this.flotOptions);
} else {
// Flot knows to look at the containers size and resize itself
this.flot.resize();
}
}, this);
} });
以下がコントローラーです。重要な部分は「データ」フィールドです。上記の JSON データを角かっこ ([ ]) の間に直接貼り付けると、グラフは正常に機能します。ただし、現在設定されている方法 (['store']) では、データを表示できず、空白のフロー チャートが表示されます。これは単純に、正しいデータ形式が Flot チャートに渡されていないためだと思います。
Ext.define('BC.view.chart.Chart', {
extend: 'Ext.panel.Panel',
alias: 'widget.chart',
name: 'Chart',
layout: 'fit',
store: 'Chart',
items: [{
xtype : "flot",
data: ['store']
}]
});
ストアが_ json ファイルの正確な内容を返す場合、ストア内の json プロキシをモデル名 (BC.model.Chart - 上記を参照) にポイントすることを想定しています。
正しいデータ形式が Flot チャートに渡されていないことは明らかです。誰かがこの問題のトラブルシューティングを手伝ってくれることを願っています。また、より簡単にトラブルシューティングできるように、どのデータがストアを介して Flot ラッパーに渡されているかを調べる方法にも興味があります。Firebug を使用しても、他に明らかなエラーは発生しません。