チャート

• 当機能は、以下のファイルに依存します(jQuery, hifiveは前提)
  • res/lib/chart/chart.js
• h5.uicomp.chart.chartControllerを子コントローラに持つコントローラを作成し、chartController#drawメソッドを呼ぶとチャートが描画されます

  var pageController = {
  	__name: 'ui.sample.chart.pageController',
  	_chartController: h5.uicomp.chart.ChartController, // チャートライブラリ
  
  	__meta: {
  		_chartController: {
  			rootElement: '#chart'
  		}
  	},
  
  	__ready: function(context) {
  
  		this._chartController.draw({
  
  		});
  	},
  
  }
  h5.core.controller('body', pageController);
  			

• API仕様などは、別途チャート部品仕様.pptxをご覧ください。
• 以下の機能を持つ
  • 折れ線、折れ線(積み上げ)、ローソクチャートの表示が可能(※塗りつぶすことで面グラフも表示可能)
  • 1領域内に複数系列(複数種類)表示可能
  • 複数領域の表示も可能(領域間の連携は未実装)
  • 表示後のデータの追加が可能(サンプルの「Go」でデータが追加される)
  • 表示後の新しい系列の追加が可能(サンプルの「系列追加」で系列が追加される)
  • 表示サイズの変更が可能(※ただし、初期サイズ以上にならないバグあり)
  • ローソクの場合はツールチップ、ハイライト機能あり(※折れ線では実装中)

折れ線グラフ(積み上げ)サンプル