kintoneで頑張るChart.js ~帯グラフをつくる~

kintoneで頑張るChart.js 〜帯グラフをつくる〜 kintone Café Online vol.1 2020/5/9 @kyokucho̲1989

自己紹介 ・kyokucho1989 ・IoTが好き ・kintoneたのしい ・広島在住 ・#人生逆転サロン メンター（IoT） twitter: @kyokucho̲1989 blog: https://matoyomi.hatenablog.com 「マトリョーシカ的日常」 youtube: マトリョーシカ的IoTチャンネル #kintonecafe @kyokucho̲1989

• https://matoyomi.hatenablog.com

自己紹介 プッチ神父回路 （素数だけ数える） カップラーメン IoT タイマー （3分経ったらLINEにお知らせ） #kintonecafe @kyokucho̲1989

本題：kintoneで帯グラフをつくりたい！ #kintonecafe @kyokucho̲1989

理想のグラフ 停止中 準備中 OK 時刻 状態を時系列で表示したい！ #kintonecafe @kyokucho̲1989

実際。。。 既存のグラフだとちょっとちがう！惜しい！ #kintonecafe @kyokucho̲1989

Chart.jsを使おう！ #kintonecafe @kyokucho̲1989

Chart.jsとは？ ・カッコいいグラフが描ける ・いろんな種類のグラフがある ・Cybouz CDNで使える #kintonecafe @kyokucho̲1989

やってみよう myChart = new Chart(elCanvas, config); グラフの中身/種類 グラフを配置するキャンバス ↑これをがんばって貼るだけ #kintonecafe @kyokucho̲1989

elCanvasあたりを詳しく書く let header = kintone.app.getHeaderSpaceElement(); let elCanvas = document.createElement('canvas'); elCanvas.id = 'canvas'; let div = returnDivname(); div.appendChild(elCanvas); header.appendChild(div); #kintonecafe @kyokucho̲1989

configの中….
let config = {
type: 'line',
data: {
datasets: [{
label: '電源OFF',
data:graph_data["電源OFF"],
steppedLine:true
},

steppedLineで凹凸グラフができる
あとはデータの整形
1

0
#kintonecafe

@kyokucho̲1989

できたよ #kintonecafe @kyokucho̲1989

Chart.js たのしいですね！！ ご静聴、ありがとうございました。 #kintonecafe @kyokucho̲1989