ラインチャート・ローソクチャートを表示可能な部品です
サンプルはこちら
var pageController = {
__name: 'ui.sample.chart.pageController',
_chartController: h5.ui.components.chart.ChartController, // チャートライブラリ
__meta: {
_chartController: {
rootElement: '#chart'
}
},
__ready: function(context) {
this._chartController.draw({
chartSetting: {
width: 600,
height: 480
},
axes: { // 軸の設定
xaxis: { // x軸
//x軸に垂直な線を引かない
off: true
},
yaxis: { // y軸
lineNum: 10, // y軸の補助線の数(上部は含む)
fontSize: '7pt', // ラベルのフォントサイズ
autoScale: function(min, max) { // オートスケールの定義
return {
rangeMax: Math.ceil(max / 200) * 200,
rangeMin: Math.floor(min / 200) * 200
};
},
range: { //Y軸の表示領域
min: 0,
max: 500
}
}
},
seriesDefault: { // すべての系列のデフォルト設定
dispDataSize: 100,
// 表示データ数
mouseover: {
tooltip: false
}
},
// 系列データ
series: [{
name: 'sample', //系列名(キーとして使用する)
type: 'line', // 線種(line, stacked_line, candleStick)
data: [], // データ
propNames: { // チャートに表示するときに使用するプロパティ名
y: 'val' // lineチャートのときは、yのプロパティ名を指定する(デフォルトはy)
},
fillColor: 'blue'
}]
});
}
};
h5.core.controller('body', pageController);