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

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

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

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

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

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

ಋೖํ๏ ๏ 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 [email protected] # yarn の場合 $ yarn add vue-chartjs [email protected]

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

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಺ʹఆٛ͢Δͱ ͦͷҐஔʹνϟʔτ͕ඳը͞ΕΔ

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

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

ྫ๮άϥϑͷඳը 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); }, };

ྫઢάϥϑͷඳը 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); }, };

ϦΞΫςΟϒͳνϟʔτͷ࣮ݱํ๏ ๏ 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>

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

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

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

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

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠

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

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

SAW

More Decks by SAW

Other Decks in Programming

Featured

Transcript

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

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

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

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

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

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

WVFDIBSUKTͷجຊతͳ࢖͍ํ νϟʔτΛඳը͢ΔͨΊͷ.vueϑΝΠϧΛ࡞੒ ‣ this.renderChart()Ͱඳը ୈҾ਺ʹ͸ඳըσʔλɾୈҾ਺ʹ͸ඳըΦϓγϣϯΛࢦఆ ‣ ίϯϙʔωϯτʹtemplateλάΛؚ·ͳ͍

WVFDIBSUKTͷجຊతͳ࢖͍ํ <template> <div> <chart-sample :data="data" /> </div> </template> <script>

ඳըσʔλͷࢦఆ ๏ σʔλνϟʔτʹϓϩοτ͢Δσʔλ΍ϥϕϧͳͲΛࢦఆ ‣ datasetsϓϩοτ͢Δσʔλ܈΍νϟʔτͷ৭ͳͲΛࢦఆ ‣ labelsσʔλ͝ͱͷϥϕϧΛࢦఆ ๏ Φϓγϣϯνϟʔτͷ࣠΍໨੝ΓͷִؒͳͲΛࢦఆ ‣

ඳըσʔλͷઃఆྫ this.data = { labels: [ // データごとのラベル 'Jan', 'Feb',

ྫ๮άϥϑͷඳը BarΛvue-chartjs͔ΒಡΈࠐΈ ๮άϥϑඳըίϯϙʔωϯτͷextendsϓϩύςΟʹBarΛࢦఆ mountedͳͲͰthis.renderChart()Λهड़ import { Bar

ྫઢάϥϑͷඳը LineΛvue-chartjs͔ΒಡΈࠐΈ ઢάϥϑඳըίϯϙʔωϯτͷextendsϓϩύςΟʹLineΛࢦఆ mountedͳͲͰthis.renderChart()Λهड़ import { Line

ϦΞΫςΟϒͳνϟʔτͷ࣮ݱํ๏ ๏ reactivePropΛಡΈࠐΜͰmixinsʹࢦఆ ‣ σʔλͷมߋΛݕ஌ͯ͠νϟʔτͷඳը΋ϦΞΫςΟϒʹ൓ө ๏ propʹ͸chart-dataͰσʔλΛ౉͢ ‣ this.renderChart()ͷୈҾ਺ʹ͸propͷthis.chartDataΛࢦఆ import

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

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

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

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

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠