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
650
インフラ勉強会LT資料:自分の本を宣伝するLT
mzryuka
1
140
Internet-Oldman-2_LT-today-no2
mzryuka
0
300
「ドラクエに学ぶチームマネジメント」読書会第5章
mzryuka
1
250
WebEngineerMeetup10_cui_quiz
mzryuka
1
1.8k
pplog_5thbd_lt
mzryuka
0
250
TOKIWANOMORI-20180901
mzryuka
0
510
aniben-20180823
mzryuka
1
1.3k
Other Decks in Technology
See All in Technology
サービスを止めるな! DDoS攻撃へのスマートな備えと最前線の事例
coconala_engineer
1
180
Snowflake Intelligenceという名のAI Agentが切り開くデータ活用の未来とその実現に必要なこと@SnowVillage『Data Management #1 Summit 2025 Recap!!』
ryo_suzuki
1
160
「Chatwork」のEKS環境を支えるhelmfileを使用したマニフェスト管理術
hanayo04
1
400
AI時代にも変わらぬ価値を発揮したい: インフラ・クラウドを切り口にユーザー価値と非機能要件に向き合ってエンジニアとしての地力を培う
netmarkjp
0
130
「現場で活躍するAIエージェント」を実現するチームと開発プロセス
tkikuchi1002
3
320
LIXIL基幹システム刷新に立ち向かう技術的アプローチについて
tsukuha
1
380
AIエージェントが書くのなら直接CloudFormationを書かせればいいじゃないですか何故AWS CDKを使う必要があるのさ
watany
18
7.6k
ポストコロナ時代の SaaS におけるコスト削減の意義
izzii
1
470
TLSから見るSREの未来
atpons
2
310
Data Engineering Study#30 LT資料
tetsuroito
1
180
SREのためのeBPF活用ステップアップガイド
egmc
2
1.3k
Copilot coding agentにベットしたいCTOが開発組織で取り組んだこと / GitHub Copilot coding agent in Team
tnir
0
190
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
54
11k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
A Tale of Four Properties
chriscoyier
160
23k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
520
RailsConf 2023
tenderlove
30
1.1k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Adopting Sorbet at Scale
ufuk
77
9.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