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

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

SAW
June 30, 2021

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

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

SAW

June 30, 2021
Tweet

More Decks by SAW

Other Decks in Programming

Transcript

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

    ॴଐגࣜձࣾ.4&/ ೥໨  ๏ ओʹ৮Ε͍ͯΔݴޠ ‣ $ ‣ +BWB4DSJQU 7VFKT /PEFKT  ‣ 1)1 -BSBWFM 5XJUUFSΞΠίϯ
  2. 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಺ʹఆٛ͢Δͱ ͦͷҐஔʹνϟʔτ͕ඳը͞ΕΔ
  3. ඳըσʔλͷઃఆྫ 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 }, ], }, }; σʔλͷઃఆྫ Φϓγϣϯͷઃఆྫ
  4. ྫ๮άϥϑͷඳը  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); }, };
  5. ྫઢάϥϑͷඳը  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); }, };
  6. ϦΞΫςΟϒͳνϟʔτͷ࣮ݱํ๏ ๏ 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>