Vue.js + vue-chartjs でチャートを表示する
この記事は約 2 分で読めます。
Vue-chartjs は、
Vue.js の Chart.js ラッパーです。
ビルドのセットアップなしで、
ブラウザで直接使用できます。
ブラウザで直接使用したい場合は、
以下を追加します。
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://unpkg.com/vue-chartjs/dist/vue-chartjs.min.js"></script>
その後、
コンポーネントを登録します。
Vue.component('line-chart', {
extends: VueChartJs.Line,
mounted() {
this.renderChart({
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'Data One',
backgroundColor: '#f87979',
data: [40, 39, 10, 40, 39, 80, 40]
}]
}, {
responsive: true,
maintainAspectRatio: false
})
}
})
var vm = new Vue({
el: '.app',
data: {
message: 'Hello World'
}
})
テンプレートを追加します。
<div class="app">
{{ message }}
<line-chart></line-chart>
</div>
以下がサンプルになります。
貴重なお時間を割き、最後まで
ご高覧いただきまして
有難うございました
ディスカッション
コメント一覧
まだ、コメントがありません