Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Ginza.js #1 LT_Draw_LineChart

C4048749e891d1958e842bccd7b533f1?s=47 MzRyuKa
May 22, 2019
Technology
1
290

Ginza.js #1 LT_Draw_LineChart

Ginza.js #1 LT用資料
タイトル「JavaScriptを好きになるためにLineChartを描画してみた」

C4048749e891d1958e842bccd7b533f1?s=128

MzRyuKa

May 22, 2019
Tweet

More Decks by MzRyuKa

See All by MzRyuKa
C4048749e891d1958e842bccd7b533f1?s=48 mzryuka
0
160
C4048749e891d1958e842bccd7b533f1?s=48 mzryuka
1
54
C4048749e891d1958e842bccd7b533f1?s=48 mzryuka
0
100
C4048749e891d1958e842bccd7b533f1?s=48 mzryuka
1
160
C4048749e891d1958e842bccd7b533f1?s=48 mzryuka
1
1.1k
C4048749e891d1958e842bccd7b533f1?s=48 mzryuka
0
90
C4048749e891d1958e842bccd7b533f1?s=48 mzryuka
0
260
C4048749e891d1958e842bccd7b533f1?s=48 mzryuka
1
900

Other Decks in Technology

See All in Technology
C0c0e8e4d7f83912cb1b1a0699df82a5?s=48 miyakemito
0
160
B3d52898f50eff76129f5479f51c02c3?s=48 c4yokohama
0
210
D8e79ab09f15e69d600c00131bf7d2a9?s=48 yfutamura
0
990
C4314fcb6d2bf1c2783b7d9050ec6665?s=48 shnjtk
1
650
Cb88f765dd38cd942c39aacb5abbea06?s=48 ufoo68
0
100
6bb0559d2066b868dab09e435f488c6c?s=48 tomoyuki
0
530
5e25aec60358948cd53cfcdfd3714c6b?s=48 weblyzard
1
2.2k
3d9e7f071ee9e03cbb088e64fae76fec?s=48 komik699
0
250
7975b9fd58c8945ae1c6b38747de7f28?s=48 line_developers_tw2
0
580
2cf373725ded741824c50fd571eda6e1?s=48 udzura
1
330
E53046bb9794560f541fcf2cf0b9d526?s=48 sayokomiura
0
320
164fd510e92a1912155b869b2c333c1e?s=48 tutuz
5
3.1k

Featured

See All Featured
Dafc4723e9a1c067796c0fec6f509774?s=48 lemiorhan
631
48k
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
221
15k
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
219
120k
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1021
390k
D47656e20ff5e42f125fc5ea0fd636c6?s=48 tmm1
62
9.9k
2f5463832ccb768ccb4a1ca3607c27ef?s=48 jacobian
257
20k
C51b39fa3c79ccb99dcb8a076bc98287?s=48 brianwarren
82
4.8k
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
129
20k
282d599b414022eba5096510f675b6e2?s=48 chrislema
173
14k
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
167
7.4k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
779
240k
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
8
830

Transcript

  1. JavaScriptΛ޷͖ʹͳΔͨΊʹ LineChartΛඳըͯ͠Έͨ 2019.05.22 Ginza.js #1 @MzRyuKa !1

  2. ࣗݾ঺հɿΈͣΓΎ { ৬ۀ: ‘ಠཱܥSIer’, ΤϯδχΞྺ: ‘20೥໨ʹಥೖ’, ࢓ࣄͰ࢖͏ٕज़: [ ‘Ruby’,’RRDtool’,’SNMP’,’JavaScript’ ],

    ਪ͠ݴޠ: [‘Golang’,’Elixir’], ޷͖ͳ΋ͷ: [ ‘Ͷ͜’, ’͏͞·Δ’,’ٕज़࿩’], Twitter : { TwitterID: ‘@MzRyuKa’, ঢ়ଶ: 'Search Suggestion Ban’ }, ϒϩά: ‘https://mzryuka.hatenablog.jp/’ } !2

  3. ͜Ε·ͰͷJavaScriptͱͷ෇͖߹͍ αʔόͰ࣮ࢪ͢ΔνΣοΫॲཧΛΫϥΠΞϯτଆ Ͱ΋࣮ࢪͤ͞ΒΕΔʢ͔͠΋௥Ճྉۚͳ͠ʣ ͔ͤͬ͘ॻ੍͍ͨޚ΋ʮJavaScript͸Φϑʹ͢Δӡ ༻͔ͩΒʯͰ࢖ΘΕͳ͔ͬͨ IE͚ͩจ๏͕ҧ͏ʂͰ΋ɺ࢖͏ͷ͸IEeee!!! 2000೥୅લ൒ͷࠒͷ࿩Ͱ͢ɻ Πϯλʔωοτ࿝ਓձͷ࿩ఔ౓Ͱฉ͖ྲྀ͍ͯͩ͘͠͞ !3

  4. ύϥμΠϜγϑτɿJavaScript࣌୅ ਖ਼௚ɺഇΕ͍ͯ͘ͱࢥͬͯͨɻ
 ʢ2000೥લ൒͸ׂͱॏ͔ͬͨ͠ɺIE͕໘౗ͩ͠ʣ ͔͠͠ɺੈ͸·͞ʹʮJavaScriptͷ࣌୅ʯʂ
 JavaScript࢖͑ͳ͚Ε͹ΤϯδχΞʹඇͣͳ෩ை งғؾͰ࢖ͬͯ͸͍Δ͚Ͳɺਖ਼௚ͦ͜·Ͱ޷͖Ͱ ΋ͳ͍ɻԿΑΓɺۤखҙ͕ࣝ…orz !4

  5. సػͷஹ͠ ͦΜͳ࣌ʹɺʮGinza.js #1ʯͷࠂ஌͕ʂ ͜Ε͸ɺྑ͍͖͔͚ͬʹͳΔ͔΋ʂ LT࿮͕ۭ͍͍ͯΔɻʮLTۦಈͩʂʯͰਃ͠ࠐΈʂ ※ޙ೔ɺCORSʹ͸·ͬͯٽ͖Λݟͨͷ͸ൿີͰ͢ɻ !5

  6. JavaScriptΛ޷͖ʹͳΔͨΊʹ LineChartΛඳըͯ͠Έͨ ͔͜͜Βຊฤ !6

  7. ޷͖ʹͳ͍ͬͯ͘ʹ͋ͨͬͯ ϏδϡΞϥΠζ͞Ε͍ͯΔ͜ͱ ࠓ΍͍ͬͯΔۀ຿ͷϓϥεʹͳΔ͜ͱ ͦΜͳʹ࿑ྗ͔͚ͳͯ͘΋ࡁΉ͜ͱ ͜Ε·ͰɺงғؾͰjQueryΛ࢖ͬͯͨΓɺnode.js΍ReactɺVue.jsͷೖ໳Ϩϕϧ͸΍͖͚ͬͯͨͲΠ ϚΠνೃછ·ͳ͔ͬͨɻͳͷͰগ͠੔ཧͯ͠Έͨɻ !7

  8. ࠓ΍͍ͬͯΔ͓࢓ࣄ SNMPͰऔಘͨ͠σʔλΛRRDtoolʹอଘͯ͠άϥϑΛ ඳը͍ͯ͠Δɻ → ͩͬͨΒɺ͜Εͱಉ͡Α͏ͳࣄ͢Ε͹ྑͦ͞͏ɻ ʢ࢓ࣄ࣌ؒதʹ΍ͬͯͯ΋ޡຐԽ͠ޮͬ͘͠ΐʣ !8

  9. ߟ͑ͨߏ੒ νϟʔτ༻ͷJSONΛฦ͢ॲཧ JSONΛड͚औͬͯϥΠϯνϟʔτΛ
 දࣔ͢ΔWebαʔό !9 → ͲͪΒ΋ɺNetlifyΛ࢖͑͹؆୯ʹ४උͰ͖ͦ͏

  10. DEMO !10 DEMO URL: https://upbeat-einstein-a1e1ed.netlify.com/public/index.html GitHub URL: https://github.com/rykawamu/biorhythm_chart_project

  11. JSONΛฦ͢ॲཧ νϟʔτදࣔ࣌ʹΘ͔Γ΍͍͢΋ͷ͕ྑ͍ͷͰɺ ʮόΠΦϦζϜʯσʔλΛฦ͢͜ͱʹͨ͠ɻ ʮΫΤϦจࣈྻʯͰσʔλมಈཁૉ͸༩͑ͱ͘ Netlify FunctionsΛ࢖ͬͯJSONΛฦ͢ !11 URL: https://upbeat-einstein-a1e1ed.netlify.com/.netlify/functions/biorhythm?birth_date=1960-02-23&base_date=&period=60

  12. ༨ஊɿόΠΦϦζϜͱ͸ ੜ໋ମͷʮ਎ମʢ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] })();

  13. LineChart:ϥΠϯνϟʔτ Chart.js C3.js Google Chart खؒΛ͔͚ͨ͘ͳ͔ͬͨͷͰɺ·ͣ͸༗໊Ͳ͜ΖͷνϟʔτϥΠϒϥϦ͔ΒखΛ͚ͭͯΈΔɻ !13 ※৘ใࢀߟݩɿ JavaScriptͰάϥϑඳըೖ໳ʂશ̔ݸͷϥΠϒϥϦΛίʔυ෇͖ͰҰڍʹղઆʂ URL:

    https://paiza.hatenablog.com/entry/2016/06/07/JavaScriptͰάϥϑඳըೖ໳ʂશ̔ݸͷϥΠϒϥϦΛίʔ

  14. Chart.js HTML5ͷcanvasΛ࢖ͬͯඳը͞ΕΔ ࣗಈతʹΞχϝʔγϣϯදࣔ͞ΕΔ ϥΠηϯε͸MIT ಛ௃ɿ !14 URL: https://upbeat-einstein-a1e1ed.netlify.com/public/chart_chart.html

  15. 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ʯʹදࣔ͢ΔσʔλΛ ઃఆ͢Δɻ

  16. 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࣠ʹࢦఆ͢ΔϥϕϧΛ’೔࣌’ʹ͢Δɻ

  17. C3.js SVGʢScalable Vector GraphicsʣΛར༻͍ͯ͠Δɻ D3.jsΛwrapͯ͠ɺ࢖͍΍͍ͯ͘͢͠Δɻ άϥϑͷঢ়ଶʹΞΫηεͰ͖ΔAPI͕ଟ͍ɻ ಛ௃ɿ !17 URL: https://upbeat-einstein-a1e1ed.netlify.com/public/chart_c3.html

  18. 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ΦϒδΣΫτΛੜ੒

  19. 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 Ͱɺνϟʔτͷඳը࣌ͷΞ χϝʔγϣϯॲཧ͕࣌ؒઃఆͰ͖Δɻ ࣮ݧػೳ͕ͩɺαϒνϟʔτ΋ࢦఆͰ͖Δɻ

  20. Google Chart SVGΛར༻͍ͯ͠Δ σʔλςʔϒϧͰ͋Δgoogle.visualization.DataTable ͸ɺaddColumnͰ߲໨ΛɺaddRowsͰσʔλΛɺͦ ΕͧΕ௥ՃͰ͖Δɻ ಛ௃ɿ !20 URL: https://upbeat-einstein-a1e1ed.netlify.com/public/chart_google.html

  21. 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࣠ͷ৘ใͳͲʣ͸ɺΦϒδΣΫτʹઃఆ ͢Δɻ

  22. 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)); ɹɹɹɹɹɹ~ҎԼུ~

  23. ·ͱΊ Netlify͸Ϛδศར ChartϥΠϒϥϦ΋͘͢͝ศར νϟʔτ͕άϦάϦಈ͘ͱςϯγϣϯ্͕Δ ࣗ෼͕ੌ͍͜ͱ͍ͯ͠Δؾ࣋ͪʹͳΕΔʢࡨ֮େࣄʣ ඇಉظॲཧ͸͜Ε͔Β޷͖ʹͳ͍ͬͯ͘ !23

  24. ͪΐͬͱ͚ͩ JavaScript͕ ޷͖ʹͳΕ·ͨ͠ !24

  25. ༨ஊɿάϥϑͱνϟʔτͷҧ͍ άϥϑʢgraphʣ νϟʔτʢchartʣ ݪଇ͸ಉٛɻͨͩ͠ɺνϟʔτͷํ͕ཧղͤ͞Δҙ͕ࣝߴ͍ɻ !25 ɾάϥϑɺਤදɺਤࣜ ɾมԽ͢Δ਺ࣈ΍ଌఆ஋ͷؒͷؔ܎Λࣔͨ͢Ίʹઢ΍ۂઢΛ࢖͏ֆ ɾ਺ྔͷ࣌ؒมԽ΍େখؔ܎ɺׂ߹ͳͲΛɺࢹ֮తʹදݱͨ͠ਤ ɾւਤɺਫ࿏ਤɺߤۭ༻ͷνϟʔτɺւਤΛਤදʹࡌͤΔɻ ɾਤදɺάϥϑɺද

    ɾཧղ͠΍͍͢Α͏ͳํ๏Ͱ৘ใΛࣔ͢Ϧετɺඳըɺάϥϑɻʢϑϩʔνϟʔτ΋ʣ ɾ৘ใͷࢹ֮తදࣔɺਤɾදɾάϥϑ౳ͷ͜ͱ

  26. ༨ஊɿsvgͱcanvasͷҧ͍ svg ϕΫλʔܗࣜͰඳըɻ֦େɾॖখͰਤܗͷྼԽ͕ͳ͍ canvas ϥελʔܗࣜͰඳըɻϐΫηϧ୯ҐͰͷࡉ͔͍ඳը͕ߦ͑Δɻ ϕΫλʔܗ͔ࣜϥελʔʢϏοτϚοϓʣܗ͔ࣜͷҧ͍ɻ !26 ※৘ใҾ༻ݩɿ URL: https://qiita.com/ryuichi1208/items/95057c253844dc7d2454