Save 37% off PRO during our Black Friday Sale! »

Vue.js と Chart.js でチャートを描画する

Be33a704f251c77162896ac5ba03e9ac?s=47 SAW
June 30, 2021

Vue.js と Chart.js でチャートを描画する

フロントエンドLT会 - vol.3 の発表資料です。

Be33a704f251c77162896ac5ba03e9ac?s=128

SAW

June 30, 2021
Tweet

Transcript

  1. 7VFKTͱ$IBSUKTͰ νϟʔτΛඳը͢Δ ϑϩϯτΤϯυ-5େձWPM  4"8

  2. $(whoami) ๏ ࢯ໊Ճ౻फҰ࿠ ࡀ  ‣ ϋϯυϧωʔϜ4"8 ‣ 5XJUUFS!B[VLJ@FBUFS ๏

    ॴଐגࣜձࣾ.4&/ ೥໨  ๏ ओʹ৮Ε͍ͯΔݴޠ ‣ $ ‣ +BWB4DSJQU 7VFKT /PEFKT  ‣ 1)1 -BSBWFM 5XJUUFSΞΠίϯ
  3. +BWB4DSJQUͷνϟʔτඳըϥΠϒϥϦ ๏ ͞·͟·ͳνϟʔτඳըϥΠϒϥϦ͕ଘࡏ ‣ $IBSUKT ‣ )JHIDIBSUT ‣ (PPHMF$IBSUT ‣

    %KT
  4. $IBSUKTͱ͸ ๏ )5.-ͷCanvasཁૉʹνϟʔτΛඳը͢ΔϥΠϒϥϦ ๏ ๮άϥϑɾઢάϥϑɾԁάϥϑͷجຊతͳάϥϑ͕ඳըՄೳ ๏ Ϩʔμʔνϟʔτ΍όϒϧνϟʔτ΋ඳըՄೳ

  5. WVFDIBSUKTͱ͸ ๏ 7VFKTͰ$IBSUKTΛѻ͏ͨΊͷϥΠϒϥϦ ๏ 7VFKTͷσʔλΛόΠϯυͯ͠νϟʔτʹඳը ๏ σʔλͷมԽΛνϟʔτʹ΋൓ө͢Δ͜ͱ͕Մೳ ϦΞΫςΟϒ

  6. ಋೖํ๏ ๏ OQNܦ༝Ͱvue-chartjsͱchart.jsΛΠϯετʔϧ ‣ WVFDIBSUKT͕DIBSUKTYܥʹະରԠͷͨΊDIBSUKTYܥΛΠϯετʔϧ<> ๏ 7VF$-*Ͱ࡞ͬͨϓϩδΣΫτͰҎԼͷίϚϯυΛ࣮ߦ [1] https://stackover fl

    ow.com/questions/66940954/why-does-nuxt-give-me-this-error-with-vue-chartjs # npm の場合 $ npm i -S vue-chartjs chart.js@2.9.4 # yarn の場合 $ yarn add vue-chartjs chart.js@2.9.4
  7. WVFDIBSUKTͷجຊతͳ࢖͍ํ   νϟʔτΛඳը͢ΔͨΊͷ.vueϑΝΠϧΛ࡞੒ ‣ this.renderChart()Ͱඳը  ୈҾ਺ʹ͸ඳըσʔλɾୈҾ਺ʹ͸ඳըΦϓγϣϯΛࢦఆ ‣ ίϯϙʔωϯτʹtemplateλάΛؚ·ͳ͍

     vueͷ୅ΘΓʹ.jsͰΦϒδΣΫτΛexportͯ͠΋ྑ͍  ඳըଆͷίϯϙʔωϯτ͔Βࢀর ‣ ඳըର৅ͷσʔλ͸propܦ༝Ͱ౉͢
  8. WVFDIBSUKTͷجຊతͳ࢖͍ํ  <template> <div> <chart-sample :data="data" /> </div> </template> <script>

    import ChartSample from './chart-sample'; export default { data() { components: { ChartSample }, return { data: { ... }, }; }, }; </script> <script> import { Line } from 'vue-chartjs'; export default { extends: Line, props: ['data'], mounted() { this.renderChart(this.data); }, }; </script> chart-sample.vue app.vue import ίϯϙʔωϯτΛtemplate಺ʹఆٛ͢Δͱ ͦͷҐஔʹνϟʔτ͕ඳը͞ΕΔ
  9. ඳըσʔλͷࢦఆ ๏ σʔλνϟʔτʹϓϩοτ͢Δσʔλ΍ϥϕϧͳͲΛࢦఆ ‣ datasetsϓϩοτ͢Δσʔλ܈΍νϟʔτͷ৭ͳͲΛࢦఆ ‣ labelsσʔλ͝ͱͷϥϕϧΛࢦఆ ๏ Φϓγϣϯνϟʔτͷ࣠΍໨੝ΓͷִؒͳͲΛࢦఆ ‣

    beginAtZero࣠ͷج४஋ʹΛར༻ ‣ stepSize࣠ͷ໨੝ΓִؒΛࢦఆ ๏ ৄࡉͳઃఆ߲໨͸$IBSUKTͷެࣜυΩϡϝϯτΛࢀর
  10. ඳըσʔλͷઃఆྫ this.data = { labels: [ // データごとのラベル 'Jan', 'Feb',

    'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', ], datasets: [ // 実データの設定 (複数指定可能) { label: 'Monthly Average Temperature', data: [ // 実データ群 4, 6, 13, 18, 19, 24, 30, 34, 27, 20, 15, 9, ], borderColor: 'rgba(255, 180, 180, 1)', fill: false, lineTension: 0, }, ], }; this.options = { scales: { // x 軸に関する設定 xAxes: [ { scaleLabel: { display: true, labelString: 'Month', }, }, ], // y 軸に関する設定 yAxes: [ // 軸を 0 基準に設定 { beginAtZero: true }, ], }, }; σʔλͷઃఆྫ Φϓγϣϯͷઃఆྫ
  11. ྫ๮άϥϑͷඳը  BarΛvue-chartjs͔ΒಡΈࠐΈ  ๮άϥϑඳըίϯϙʔωϯτͷextendsϓϩύςΟʹBarΛࢦఆ  mountedͳͲͰthis.renderChart()Λهड़ import { Bar

    } from 'vue-chartjs'; export default { extends: Bar, props: ['data', 'options'], mounted() { this.renderChart(this.data, this.options); }, };
  12. ྫઢάϥϑͷඳը  LineΛvue-chartjs͔ΒಡΈࠐΈ  ઢάϥϑඳըίϯϙʔωϯτͷextendsϓϩύςΟʹLineΛࢦఆ  mountedͳͲͰthis.renderChart()Λهड़ import { Line

    } from 'vue-chartjs'; export default { extends: Line, props: ['data', 'options'], mounted() { this.renderChart(this.data, this.options); }, };
  13. ϦΞΫςΟϒͳνϟʔτͷ࣮ݱํ๏ ๏ reactivePropΛಡΈࠐΜͰmixinsʹࢦఆ ‣ σʔλͷมߋΛݕ஌ͯ͠νϟʔτͷඳը΋ϦΞΫςΟϒʹ൓ө ๏ propʹ͸chart-dataͰσʔλΛ౉͢ ‣ this.renderChart()ͷୈҾ਺ʹ͸propͷthis.chartDataΛࢦఆ import

    { Line, mixins } from 'vue-chartjs'; const { reactiveProp } = mixins; export default { extends: Line, mixins: [reactiveProp], mounted() { this.renderChart(this.chartData); }, }; <template> <div> <chart-sample :chart-data="data" /> </div> </template>
  14. reactivePropͷσϞ ๏ ϦΞϧλΠϜʹ౤ථσʔλͷ൓ө ๏ ϘλϯΛԡͯ͠σʔλΛ௥Ճ ‣ ԡ͞Εͨࡍʹνϟʔτ΋ߋ৽

  15. WVFDIBSUKTͷར༻ྫ ๏ େࡕ෎৽ܕίϩφ΢Πϧεײછ঱ରࡦαΠτ< > ‣ ཅੑऀ਺΍ݕ࣮ࠪࢪ਺ɾ૬ஊ݅਺ͳͲΛՄࢹԽ [2] https://covid19-osaka.info/ [3] https://github.com/codeforosaka/covid19

  16. WVFDIBSUKTͷར༻ྫ ๏ େࡕ෎৽ܕίϩφ΢Πϧε౷ܭ৘ใ< > ‣ ཅੑऀ΍ݕࠪ਺ͳͲͷਪҠΛ೔ผɾ݄ผʹՄࢹԽ [4] https://covid-19.azuki-penguin.org [5] https://github.com/azuki-penguin/osaka-covid-19-statistics

  17. ૯ׅ ๏ 7VFDIBSUKTͷجຊతͳ࢖͍ํΛ঺հ ๏ σʔλͷมߋΛݕ஌ͯ͠νϟʔτΛϦΞΫςΟϒʹඳը ๏ ࣮ࡍͷར༻ྫΛ঺հ

  18. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠