{"provider_url":"https://hatena.blog","url":"https://kagasu.hatenablog.com/entry/2020/10/06/035030","title":"Vue.js + Chart.js\u3067\u6570\u5024\u3092\u30ab\u30f3\u30de\u533a\u5207\u308a\u3067\u8868\u793a\u3059\u308b\u65b9\u6cd5","version":"1.0","published":"2020-10-06 03:50:30","type":"rich","blog_url":"https://kagasu.hatenablog.com/","width":"100%","author_url":"https://blog.hatena.ne.jp/kagasu/","blog_title":"\u5099\u5fd8\u9332","author_name":"kagasu","provider_name":"Hatena Blog","description":"\u2160. \u306f\u3058\u3081\u306b \u30bf\u30a4\u30c8\u30eb\u306e\u901a\u308a\u300cVue.js + Chart.js\u3067\u6570\u5024\u3092\u30ab\u30f3\u30de\u533a\u5207\u308a\u3067\u8868\u793a\u3059\u308b\u65b9\u6cd5\u300d\u3067\u3059\u3002 \u2161. \u3084\u308a\u65b9 1. \u5fc5\u8981\u306a\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3059\u308b npm i vue-chartjs npm i chart.js 2. \u30b5\u30f3\u30d7\u30eb\u30d7\u30ed\u30b0\u30e9\u30e0\u3092\u66f8\u304f src/components/LineChart.vue <script> import { Line, mixins } from 'vue-chartjs' const { reactiveProp } = mixins export default { extends: Line, mixins: [ reactiveProp \u2026","height":"190","image_url":"https://cdn-ak.f.st-hatena.com/images/fotolife/k/kagasu/20201006/20201006034549.png","html":"<iframe src=\"https://hatenablog-parts.com/embed?url=https%3A%2F%2Fkagasu.hatenablog.com%2Fentry%2F2020%2F10%2F06%2F035030\" title=\"Vue.js + Chart.js\u3067\u6570\u5024\u3092\u30ab\u30f3\u30de\u533a\u5207\u308a\u3067\u8868\u793a\u3059\u308b\u65b9\u6cd5 - \u5099\u5fd8\u9332\" class=\"embed-card embed-blogcard\" scrolling=\"no\" frameborder=\"0\" style=\"display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;\"></iframe>","categories":["Vue.js","JavaScript"]}