EChartsはJSグラフライブラリです。 公式のデモを見るとわかりますが、非常に多くの種類のグラフに対応しています。 今回は、kintoneに保存したデータから3D棒グラフを作成してみました。
サンプル
月をx軸、支社名をy軸、売上をz軸とした3D棒グラフを表示します。
フォーム設定
コード
HTML(カスタマイズビュー)
\<divid="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";vargetAllRecords=function(records){varlimit=500;records=records||[];returnkintone.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){returngetAllRecords(records);}else{returnrecords;}});};kintone.events.on('app.record.index.show',function(event){if(event.viewName!=='3Dグラフ')return;getAllRecords().then(function(records){vardom=document.getElementById("echarts");varmyChart=echarts.init(dom);varmonths=[1,2,3,4,5,6,7,8,9,10,11,12];varoffices=['札幌','東京','名古屋','大阪','福岡'];vardata=months.reduce(function(accumulator,month,xIndex){returnaccumulator.concat(offices.map(function(office,yIndex){return[xIndex,yIndex,Number((records.find(function(record){returnrecord.月.value==month&&record.支社.value==office;})||{売上:{value:0}}).売上.value)];}));},[]);varoption={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);});});})();