JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://code.htmlhifive.com/h5.css">
<script src="https://code.htmlhifive.com/ejs-h5mod.js"></script>
<script src="https://hifive.github.io/hifive-res/fw/current/h5.dev.js"></script>
<link rel="stylesheet" href="https://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/chart/src/chart.css">
<script src="https://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/chart/src/graphic-renderer.js"></script>
<script src="https://hifive.github.io/hifive-ui-library/hifive-ui-library/WebContent/components/chart/src/chart.js"></script>
<div id="chart" ></div>
JavaScript
(function() {
var pageController = {
__name: 'ui.chart.pageController',
_chartController: h5.ui.components.chart.ChartController, // チャートライブラリ
__meta: {
_chartController: {
rootElement: '#chart'
}
},
__ready: function(context) {
var series = [this._createNewSeries()];
this._chartController.draw({
chartSetting: {
width: 600,
height: 480
},
axes: {
xaxis: {
off: true
},
yaxis: { // y軸
lineNum: 6, // y軸の補助線の数(上部は含む)
fontSize: '12pt', // ラベルのフォントサイズ
autoScale: function(min, max) { // オートスケールの定義
return {
rangeMax: Math.ceil(max / 500) * 500,
rangeMin: 260
};
},
}
},
seriesDefault: { // すべての系列のデフォルト設定
dispDataSize: 100,
},
series: series
// 系列データ
});
},
_createNewSeries: function() {
var data = createChartDummyData(400, 100); // ダミーデータを生成
// 系列定義
return {
name: 'series_1',
type: 'line',
data: data,
propNames: {
y: 'val'
},
color: 'blue'
};
}
};
h5.core.expose(pageController);
/**
* ダミーデータ生成関数
*/
function createChartDummyData(median, vibration) {
var ret = [];
for (var i = 0; i < 100; i++) {
ret.push({
val: median + (Math.random() - 0.5) * vibration * 2
});
}
return ret;
}
})();
$(function() {
h5.core.controller('body', ui.chart.pageController);
})