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

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

Transcript

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

   View Slide

2. $(whoami)
   ๏ ࢯ໊Ճ౻फҰ࿠ ࡀ
   
   ‣ ϋϯυϧωʔϜ4"8
   ‣ 5XJUUFS!B[VLJ@FBUFS
   ๏ ॴଐגࣜձࣾ.4&/ ೥໨
   
   ๏ ओʹ৮Ε͍ͯΔݴޠ
   ‣ $
   ‣ +BWB4DSJQU 7VFKT /PEFKT
   
   ‣ 1)1 -BSBWFM
   
   5XJUUFSΞΠίϯ
   

   View Slide

3. +BWB4DSJQUͷνϟʔτඳըϥΠϒϥϦ
   ๏ ͞·͟·ͳνϟʔτඳըϥΠϒϥϦ͕ଘࡏ
   ‣ $IBSUKT
   ‣ )JHIDIBSUT
   ‣ (PPHMF$IBSUT
   ‣ %KT
   

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

7. WVFDIBSUKTͷجຊతͳ࢖͍ํ
   
   νϟʔτΛඳը͢ΔͨΊͷ.vueϑΝΠϧΛ࡞੒
   ‣ this.renderChart()Ͱඳը
   ୈҾ਺ʹ͸ඳըσʔλɾୈҾ਺ʹ͸ඳըΦϓγϣϯΛࢦఆ
   ‣ ίϯϙʔωϯτʹtemplateλάΛؚ·ͳ͍
   vueͷ୅ΘΓʹ.jsͰΦϒδΣΫτΛexportͯ͠΋ྑ͍
   ඳըଆͷίϯϙʔωϯτ͔Βࢀর
   ‣ ඳըର৅ͷσʔλ͸propܦ༝Ͱ౉͢
   

   View Slide

8. WVFDIBSUKTͷجຊతͳ࢖͍ํ
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   <br/><br/><br/>import ChartSample from './chart-sample';<br/><br/><br/>export default {<br/><br/><br/>data() {<br/><br/><br/>components: { ChartSample },<br/><br/><br/>return {<br/><br/><br/>data: { ... },<br/><br/><br/>};<br/><br/><br/>},<br/><br/><br/>};<br/><br/><br/>
   <br/><br/><br/>import { Line } from 'vue-chartjs';<br/><br/><br/>export default {<br/><br/><br/>extends: Line,<br/><br/><br/>props: ['data'],<br/><br/><br/>mounted() {<br/><br/><br/>this.renderChart(this.data);<br/><br/><br/>},<br/><br/><br/>};<br/><br/><br/>
   chart-sample.vue
   app.vue
   import
   ίϯϙʔωϯτΛtemplate಺ʹఆٛ͢Δͱ
   ͦͷҐஔʹνϟʔτ͕ඳը͞ΕΔ
   

   View Slide

9. ඳըσʔλͷࢦఆ
   ๏ σʔλνϟʔτʹϓϩοτ͢Δσʔλ΍ϥϕϧͳͲΛࢦఆ
   ‣ datasetsϓϩοτ͢Δσʔλ܈΍νϟʔτͷ৭ͳͲΛࢦఆ
   ‣ labelsσʔλ͝ͱͷϥϕϧΛࢦఆ
   ๏ Φϓγϣϯνϟʔτͷ࣠΍໨੝ΓͷִؒͳͲΛࢦఆ
   ‣ beginAtZero࣠ͷج४஋ʹΛར༻
   ‣ stepSize࣠ͷ໨੝ΓִؒΛࢦఆ
   ๏ ৄࡉͳઃఆ߲໨͸$IBSUKTͷެࣜυΩϡϝϯτΛࢀর
   

   View Slide

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 },
    
    
    ],
    
    
    },
    
    
    };
    σʔλͷઃఆྫ Φϓγϣϯͷઃఆྫ
    

    View Slide

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);
    
    
    },
    
    
    };
    
    
    

    View Slide

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);
    
    
    },
    
    
    };
    
    
    

    View Slide

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);
    
    
    },
    
    
    };
    
    
    
    
    
    
    
    
    :chart-data="data"
    
    
    />
    
    
    
    
    
    
    

    View Slide

14. reactivePropͷσϞ
    ๏ ϦΞϧλΠϜʹ౤ථσʔλͷ൓ө
    ๏ ϘλϯΛԡͯ͠σʔλΛ௥Ճ
    ‣ ԡ͞Εͨࡍʹνϟʔτ΋ߋ৽
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide