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

0.9K Views

May 09, 20

スライド概要

kintone Cafe Online vol.1

profile-image

製造業で機械系エンジニアをやってます。IoT的なこともすこしやってます。

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

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

2.

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

3.

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

4.

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

5.

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

6.

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

7.

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

8.

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

9.

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

10.

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

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

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

0
#kintonecafe

@kyokucho̲1989

12.

できたよ #kintonecafe @kyokucho̲1989

13.

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