EChartsはJSグラフライブラリです。 公式のデモを見るとわかりますが、非常に多くの種類のグラフに対応しています。 今回は、kintoneに保存したデータから3D棒グラフを作成してみました。
サンプル
月をx軸、支社名をy軸、売上をz軸とした3D棒グラフを表示します。
フォーム設定
コード
HTML(カスタマイズビュー)
<div id="echarts" style="margin:auto;width:700px;height:500px;background:#eee;max-width:100%;"></div>
JavaScript
echarts.min.js、echarts-gl.min.jsを読み込み後、下記sample.jsを読み込みます。
(function() { "use strict"; var getAllRecords = function(records){ var limit = 500; records = records || []; return kintone.api(kintone.api.url('/k/v1/records', true), 'GET', { app: kintone.app.getId(), query: 'limit ' + limit + ' offset ' + records.length }).then(function(response){ records = records.concat(response.records); if(response.records.length === limit){ return getAllRecords(records); }else{ return records; } }); }; kintone.events.on('app.record.index.show', function(event){ if(event.viewName !== '3Dグラフ') return; getAllRecords().then(function(records){ var dom = document.getElementById("echarts"); var myChart = echarts.init(dom); var months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; var offices = ['札幌', '東京', '名古屋', '大阪', '福岡']; var data = months.reduce(function(accumulator, month, xIndex){ return accumulator.concat(offices.map(function(office, yIndex){ return [xIndex, yIndex, Number((records.find(function(record){ return record.月.value == month && record.支社.value == office; }) || {売上:{value:0}}).売上.value)]; })); }, []); var option = { tooltip: { formatter: function(param){ return ( months[param.data[0]] + '月' + '<br>' + offices[param.data[1]] + '支社' + '<br>' + param.data[2] + '円' ); } }, visualMap: { max: 100000, inRange: { color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026'] } }, xAxis3D: { type: 'category', data: months, name: '月', nameGap: 30 }, yAxis3D: { type: 'category', data: offices, name: '支社', nameGap: 30 }, zAxis3D: { type: 'value', name: '売上', nameGap: 30 }, grid3D: {}, series: [{ name: '売上', type: 'bar3D', data: data, }] }; myChart.setOption(option, true); }); }); })();
0件のコメント