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ͷجຊతͳ࢖͍ํ import ChartSample from './chart-sample'; export default { data() { components: { ChartSample }, return { data: { ... }, }; }, }; import { Line } from 'vue-chartjs'; export default { extends: Line, props: ['data'], mounted() { this.renderChart(this.data); }, }; 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); }, };

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ͷجຊతͳ࢖͍ํΛ঺հ ๏ σʔλͷมߋΛݕ஌ͯ͠νϟʔτΛϦΞΫςΟϒʹඳը ๏ ࣮ࡍͷར༻ྫΛ঺հ

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