Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Ginza.js #1 LT_Draw_LineChart
Search
MzRyuKa
May 22, 2019
Technology
1
520
Ginza.js #1 LT_Draw_LineChart
Ginza.js #1 LT用資料
タイトル「JavaScriptを好きになるためにLineChartを描画してみた」
MzRyuKa
May 22, 2019
Tweet
Share
More Decks by MzRyuKa
See All by MzRyuKa
EDI_LT_Elixir_books_story
mzryuka
0
660
インフラ勉強会LT資料:自分の本を宣伝するLT
mzryuka
1
140
Internet-Oldman-2_LT-today-no2
mzryuka
0
310
「ドラクエに学ぶチームマネジメント」読書会第5章
mzryuka
1
250
WebEngineerMeetup10_cui_quiz
mzryuka
1
1.9k
pplog_5thbd_lt
mzryuka
0
260
TOKIWANOMORI-20180901
mzryuka
0
520
aniben-20180823
mzryuka
1
1.3k
Other Decks in Technology
See All in Technology
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
450
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
230
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3.1k
なぜスクラムはこうなったのか?歴史が教えてくれたこと/Shall we explore the roots of Scrum
sanogemaru
5
1.6k
研究開発と製品開発、両利きのロボティクス
youtalk
1
520
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
7
790
要件定義・デザインフェーズでもAIを活用して、コミュニケーションの密度を高める
kazukihayase
0
100
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
230
20250913_JAWS_sysad_kobe
takuyay0ne
2
150
スマートファクトリーの第一歩 〜AWSマネージドサービスで 実現する予知保全と生成AI活用まで
ganota
2
210
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
20
9.9k
ZOZOマッチのアーキテクチャと技術構成
zozotech
PRO
3
1.5k
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Building an army of robots
kneath
306
46k
Fireside Chat
paigeccino
39
3.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
How to Ace a Technical Interview
jacobian
279
23k
BBQ
matthewcrist
89
9.8k
Visualization
eitanlees
148
16k
Producing Creativity
orderedlist
PRO
347
40k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Site-Speed That Sticks
csswizardry
10
810
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
Transcript
JavaScriptΛ͖ʹͳΔͨΊʹ LineChartΛඳըͯ͠Έͨ 2019.05.22 Ginza.js #1 @MzRyuKa !1
ࣗݾհɿΈͣΓΎ { ৬ۀ: ‘ಠཱܥSIer’, ΤϯδχΞྺ: ‘20ʹಥೖ’, ࣄͰ͏ٕज़: [ ‘Ruby’,’RRDtool’,’SNMP’,’JavaScript’ ],
ਪ͠ݴޠ: [‘Golang’,’Elixir’], ͖ͳͷ: [ ‘Ͷ͜’, ’͏͞·Δ’,’ٕज़’], Twitter : { TwitterID: ‘@MzRyuKa’, ঢ়ଶ: 'Search Suggestion Ban’ }, ϒϩά: ‘https://mzryuka.hatenablog.jp/’ } !2
͜Ε·ͰͷJavaScriptͱͷ͖߹͍ αʔόͰ࣮ࢪ͢ΔνΣοΫॲཧΛΫϥΠΞϯτଆ Ͱ࣮ࢪͤ͞ΒΕΔʢ͔͠Ճྉۚͳ͠ʣ ͔ͤͬ͘ॻ੍͍ͨޚʮJavaScriptΦϑʹ͢Δӡ ༻͔ͩΒʯͰΘΕͳ͔ͬͨ IE͚ͩจ๏͕ҧ͏ʂͰɺ͏ͷIEeee!!! 2000લͷࠒͷͰ͢ɻ ΠϯλʔωοτਓձͷఔͰฉ͖ྲྀ͍ͯͩ͘͠͞ !3
ύϥμΠϜγϑτɿJavaScript࣌ ਖ਼ɺഇΕ͍ͯ͘ͱࢥͬͯͨɻ ʢ2000લׂͱॏ͔ͬͨ͠ɺIE͕໘ͩ͠ʣ ͔͠͠ɺੈ·͞ʹʮJavaScriptͷ࣌ʯʂ JavaScript͑ͳ͚ΕΤϯδχΞʹඇͣͳ෩ை งғؾͰ͍ͬͯΔ͚Ͳɺਖ਼ͦ͜·Ͱ͖Ͱ ͳ͍ɻԿΑΓɺۤखҙ͕ࣝ…orz !4
సػͷஹ͠ ͦΜͳ࣌ʹɺʮGinza.js #1ʯͷࠂ͕ʂ ͜Εɺྑ͍͖͔͚ͬʹͳΔ͔ʂ LT͕ۭ͍͍ͯΔɻʮLTۦಈͩʂʯͰਃ͠ࠐΈʂ ※ޙɺCORSʹ·ͬͯٽ͖ΛݟͨͷൿີͰ͢ɻ !5
JavaScriptΛ͖ʹͳΔͨΊʹ LineChartΛඳըͯ͠Έͨ ͔͜͜Βຊฤ !6
͖ʹͳ͍ͬͯ͘ʹ͋ͨͬͯ ϏδϡΞϥΠζ͞Ε͍ͯΔ͜ͱ ࠓ͍ͬͯΔۀͷϓϥεʹͳΔ͜ͱ ͦΜͳʹ࿑ྗ͔͚ͳͯ͘ࡁΉ͜ͱ ͜Ε·ͰɺงғؾͰjQueryΛͬͯͨΓɺnode.jsReactɺVue.jsͷೖϨϕϧ͖͚ͬͯͨͲΠ ϚΠνೃછ·ͳ͔ͬͨɻͳͷͰগ͠ཧͯ͠Έͨɻ !7
ࠓ͍ͬͯΔ͓ࣄ SNMPͰऔಘͨ͠σʔλΛRRDtoolʹอଘͯ͠άϥϑΛ ඳը͍ͯ͠Δɻ → ͩͬͨΒɺ͜Εͱಉ͡Α͏ͳࣄ͢Εྑͦ͞͏ɻ ʢࣄ࣌ؒதʹͬͯͯޡຐԽ͠ޮͬ͘͠ΐʣ !8
ߟ͑ͨߏ νϟʔτ༻ͷJSONΛฦ͢ॲཧ JSONΛड͚औͬͯϥΠϯνϟʔτΛ දࣔ͢ΔWebαʔό !9 → ͲͪΒɺNetlifyΛ͑؆୯ʹ४උͰ͖ͦ͏
DEMO !10 DEMO URL: https://upbeat-einstein-a1e1ed.netlify.com/public/index.html GitHub URL: https://github.com/rykawamu/biorhythm_chart_project
JSONΛฦ͢ॲཧ νϟʔτදࣔ࣌ʹΘ͔Γ͍͢ͷ͕ྑ͍ͷͰɺ ʮόΠΦϦζϜʯσʔλΛฦ͢͜ͱʹͨ͠ɻ ʮΫΤϦจࣈྻʯͰσʔλมಈཁૉ༩͑ͱ͘ Netlify FunctionsΛͬͯJSONΛฦ͢ !11 URL: https://upbeat-einstein-a1e1ed.netlify.com/.netlify/functions/biorhythm?birth_date=1960-02-23&base_date=&period=60
༨ஊɿόΠΦϦζϜͱ ੜ໋ମͷʮମʢPhysicalʣʯʮײ ʢSensitivityʣʯʮੑʢIntellectualʣʯ͕Ұ ఆͷपظύλʔϯͰมԽ͢Δͱݴ͏આʹجͮ ͍ͨάϥϑͷ͜ͱ ʮਖ਼ݭʯͷܗͰɺy = sin(2 π t
/ T) ͷࣜͰࢉग़͞ΕΔɻ t: ج४ - ੜ݄ ͔Βࢉग़͞ΕΔ T: ମʢPʣͷ߹23ɺײʢPʣͷ߹28ɺ ੑʢIʣͷ߹33ͷݻఆͷͱͳΔɻ 23ͱ28ͱ33ͷ࠷খެഒ21252Ͱ͋Δɻ ʹ͢ͱʮ58.2ʯͰ͋Δɻ !12 //Create biorhythm data const [p_v, s_v, i_v] = (function() { const pi = Math.PI const biorhythm_func = (function(T) { return Math.sin(elapsed_days * 2 * pi / T).toFixed(4) }) const physical = biorhythm_func(23); const sensitivity = biorhythm_func(28); const intellectual = biorhythm_func(33); return [physical, sensitivity, intellectual] })();
LineChart:ϥΠϯνϟʔτ Chart.js C3.js Google Chart खؒΛ͔͚ͨ͘ͳ͔ͬͨͷͰɺ·ͣ༗໊Ͳ͜ΖͷνϟʔτϥΠϒϥϦ͔ΒखΛ͚ͭͯΈΔɻ !13 ※ใࢀߟݩɿ JavaScriptͰάϥϑඳըೖʂશ̔ݸͷϥΠϒϥϦΛίʔυ͖ͰҰڍʹղઆʂ URL:
https://paiza.hatenablog.com/entry/2016/06/07/JavaScriptͰάϥϑඳըೖʂશ̔ݸͷϥΠϒϥϦΛίʔ
Chart.js HTML5ͷcanvasΛͬͯඳը͞ΕΔ ࣗಈతʹΞχϝʔγϣϯදࣔ͞ΕΔ ϥΠηϯεMIT ಛɿ !14 URL: https://upbeat-einstein-a1e1ed.netlify.com/public/chart_chart.html
Chart.js ར༻ྫ1 !15 var ctx = document.getElementById('myChart_b'); var myChart =
new Chart(ctx, { type: 'line', data: { datasets: [{ label: '# of Physical', fill: false, data: [], backgroundColor: 'rgba(0, 0, 255, 0.3)', borderColor: 'rgba(0, 0, 255, 0.3)', borderWidth: 3 } ,{ label: '# of Sensitivity', fill: false, data: [], backgroundColor: 'rgba(255, 0, 0, 0.3)', ~ҎԼུ~ document.getElementById()Ͱඳըରʹ͢ΔCanvasλάΛ ࢦఆ͢Δɻ canvasΦϒδΣΫτΛChartΦϒδΣΫτͷҾʹ͢Δ ͜ͱͰؔ࿈͚ͮΔɻ·ͨɺChartͷઃఆΦϒδΣΫτܗ ࣜͰ͢ɻ νϟʔτͷछྨtype:Ͱࢦఆ͢Δɻ’line’ʹ͢ΔͱʮϥΠ ϯνϟʔτʯʹͳΔɻ σʔλɺdata.datasets ʹରͯ͠ɺΦϒδΣΫτͷྻ Λ͢ɻΦϒδΣΫτ߲༻ҙ͢Δɻ ֤߲ͷΦϒδΣΫτͷʮdataʯʹදࣔ͢ΔσʔλΛ ઃఆ͢Δɻ
Chart.js ར༻ྫ2 !16 options: { scales: { xAxes: [{ type:
'time', distribution: 'series', time: { unit: 'day', displayFormats: {'day': 'YYYY-MM-DD'} }, scaleLabel: { display: true, labelString: '࣌' } }], yAxes: [{ ticks: { } }] } } ~ҎԼུ~ optionsΦϒδΣΫτΛ͢͜ͱͰɺX࣠Y࣠ ʹରͯ͠ͷઃఆՄೳʹͳΔɻ X࣠Λ࣌ܥྻʹ͢ΔͨΊʹɺtypeͰ’time’Λɺ distributionͰ’series’Λࢦఆ͢Δɻ X࣠ͷΛܗࣜYYYY-MM-DDͰઃఆ͢Δɻ X࣠ʹࢦఆ͢ΔϥϕϧΛ’࣌’ʹ͢Δɻ
C3.js SVGʢScalable Vector GraphicsʣΛར༻͍ͯ͠Δɻ D3.jsΛwrapͯ͠ɺ͍͍ͯ͘͢͠Δɻ άϥϑͷঢ়ଶʹΞΫηεͰ͖ΔAPI͕ଟ͍ɻ ಛɿ !17 URL: https://upbeat-einstein-a1e1ed.netlify.com/public/chart_c3.html
C3.js ར༻ྫ1 !18 <html> <head> <meta charset="UTF-8"> <link href="https://cdnjs.cloudflare.com/ajax/ libs/c3/0.7.0/c3.min.css"
rel="stylesheet" type="text/css"> <script src="https://cdnjs.cloudflare.com/ajax/ libs/d3/5.9.2/d3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/ libs/c3/0.7.0/c3.min.js"></script> <title>c3.jsʹΑΔνϟʔτදࣔ</title> </head> <body> <div id="chart"></div> <script> var chart = c3.generate({ bindto: '#chart', ~ҎԼུ~ D3.jsΛར༻͢ΔͨΊɺD3.jsͷࢦఆ͕ඞཁʹͳ Δɻ c3.jsɺಉ࣌ʹc3.cssͷࢦఆඞཁʹͳΔɻ divλάͰඳը͢ΔՕॴΛઃఆɻ c3.generateͰɺchartΦϒδΣΫτΛੜ
C3.js ར༻ྫ2 !19 grid: { x: { lines: [ {value:
moment().format('YYYY-MM-DD'), text: 'ج४', position: 'start'}, ] }, y: { show: true, lines: [ {value: 0.0, text: 'ෆ҆ఆ', axis: 'y', position:’start'}, {value: 1.0, text: 'ߴௐ', axis: 'y', position: 'start'}, {value: -1.0, text: 'ௐ', axis: 'y', position: 'start'}, ] } }, // animation: tansition duration: miliseconds transition: { duration: 5000 }, // sub chart(Experimental) subchart: {show: true} ~ҎԼུ~ X࣠ʹิॿઢΛೖΕΔ߹ɺgrid.x.linesʹର͠ ͯઃఆͷΦϒδΣΫτͷྻΛೖΕΔɻ Y࣠ʹิॿઢΛೖΕΔ߹ɺgrid.x.linesʹର͠ ͯઃఆͷΦϒδΣΫτͷྻΛೖΕΔɻ transition.duration Ͱɺνϟʔτͷඳը࣌ͷΞ χϝʔγϣϯॲཧ͕࣌ؒઃఆͰ͖Δɻ ࣮ݧػೳ͕ͩɺαϒνϟʔτࢦఆͰ͖Δɻ
Google Chart SVGΛར༻͍ͯ͠Δ σʔλςʔϒϧͰ͋Δgoogle.visualization.DataTable ɺaddColumnͰ߲ΛɺaddRowsͰσʔλΛɺͦ ΕͧΕՃͰ͖Δɻ ಛɿ !20 URL: https://upbeat-einstein-a1e1ed.netlify.com/public/chart_google.html
Google Chart ར༻ྫ1 !21 const data = new google.visualization.DataTable(); data.addColumn('string',
'X'); data.addColumn('number', 'physical'); data.addColumn('number', 'sensitivity'); data.addColumn('number', 'intellectual'); data.addRows(chartData); const options = { 'title': 'Biorhythm Line Chart', 'width':900, 'height':500, hAxis: { title: 'Date', gridlines: {color: '#333', count: 10} }, vAxis: { title: 'Biorhythm PSI', gridlines: {color: '#333', count: 10} }, }; ~ҎԼུ~ දࣔσʔλgoogle.visualization.DatatTableͷΦ ϒδΣΫτΛੜͯ͠ɺͦ͜ʹઃఆ͢Δɻ දࣔ͢Δ߲addColumnͰݸʑʹՃ͢Δɻ දࣔσʔλaddRowsͰઃఆ͢Δɻઃఆσʔλ ɺ[ [1,2,3,4], [5,6,7,8], [~ུ~], ... ]ͷΑ͏ʹೋ࣍ ݩྻɻʢ෦ͷྻཁૉɺ߲ʹ߹Θ ͤΔɻࠨͷྫͩͱ4ͭʣ දࣔσʔλҎ֎ͷઃఆใʢνϟʔτͷαΠζ X࣠Y࣠ͷใͳͲʣɺΦϒδΣΫτʹઃఆ ͢Δɻ
Google Chart ར༻ྫ2 !22 const chart = new google.visualization.LineChart(document.getElementById('chart_div')); //
printing png : // https://developers.google.com/chart/interactive/docs/printing const my_chart_div = document.getElementById('linechart_png'); google.visualization.events.addListener(chart, 'ready', function () { my_chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">'; }); chart.draw(data, options); google.visualizetion.LineChartͰϥΠϯνϟʔτͷΦ ϒδΣΫτΛੜ getImageURIϝιουΛར༻͢ΕɺνϟʔτͷΠ ϝʔδਤऔಘՄೳɻ ϥΠϯνϟʔτʹΠϕϯτՃՄೳ ϕʔλ൛ͰʮϚςϦΞϧ൛ͷϥΠϯνϟʔτʯ ར༻Ͱ͖ΔɻʢϚεΦʔόʔ࣌ͷॲཧͳͲ͕߽ ՚ʹͳ͍ͬͯΔɻʣ ϚςϦΞϧ༻ͷϥΠϯνϟʔτʹ͢Δʹɺ packageͰlineΛϩʔυɺgoogle.charts.LineΦϒδΣ ΫτੜɺϚςϦΞϧ༻ͷoptionsͷม͕ඞཁɻ google.charts.load('current', {packages: ['corechart', 'line']}); ɹɹɹɹɹɹ~தུ~ const chart = new google.charts.Line(document.getElementById('linechart_material')); chart.draw(data, google.charts.Line.convertOptions(options)); ɹɹɹɹɹɹ~ҎԼུ~
·ͱΊ NetlifyϚδศར ChartϥΠϒϥϦ͘͢͝ศར νϟʔτ͕άϦάϦಈ͘ͱςϯγϣϯ্͕Δ ͕ࣗੌ͍͜ͱ͍ͯ͠Δؾ࣋ͪʹͳΕΔʢࡨ֮େࣄʣ ඇಉظॲཧ͜Ε͔Β͖ʹͳ͍ͬͯ͘ !23
ͪΐͬͱ͚ͩ JavaScript͕ ͖ʹͳΕ·ͨ͠ !24
༨ஊɿάϥϑͱνϟʔτͷҧ͍ άϥϑʢgraphʣ νϟʔτʢchartʣ ݪଇಉٛɻͨͩ͠ɺνϟʔτͷํ͕ཧղͤ͞Δҙ͕ࣝߴ͍ɻ !25 ɾάϥϑɺਤදɺਤࣜ ɾมԽ͢ΔࣈଌఆͷؒͷؔΛࣔͨ͢ΊʹઢۂઢΛ͏ֆ ɾྔͷ࣌ؒมԽେখؔɺׂ߹ͳͲΛɺࢹ֮తʹදݱͨ͠ਤ ɾւਤɺਫ࿏ਤɺߤۭ༻ͷνϟʔτɺւਤΛਤදʹࡌͤΔɻ ɾਤදɺάϥϑɺද
ɾཧղ͍͢͠Α͏ͳํ๏ͰใΛࣔ͢Ϧετɺඳըɺάϥϑɻʢϑϩʔνϟʔτʣ ɾใͷࢹ֮తදࣔɺਤɾදɾάϥϑͷ͜ͱ
༨ஊɿsvgͱcanvasͷҧ͍ svg ϕΫλʔܗࣜͰඳըɻ֦େɾॖখͰਤܗͷྼԽ͕ͳ͍ canvas ϥελʔܗࣜͰඳըɻϐΫηϧ୯ҐͰͷࡉ͔͍ඳը͕ߦ͑Δɻ ϕΫλʔܗ͔ࣜϥελʔʢϏοτϚοϓʣܗ͔ࣜͷҧ͍ɻ !26 ※ใҾ༻ݩɿ URL: https://qiita.com/ryuichi1208/items/95057c253844dc7d2454