vue.jsを勉強している中で，グラフを描写する機会が出てきました！そこで，簡単にグラフが描けるchart.jsを作って見ました

chart.jsとは

Chart.jsは、データ視覚化用の無料のオープンソース JavaScriptライブラリで、バー、ライン、エリア、パイ、バブル、レーダー、ポーラー、散布図の8つのチャートタイプをサポートしています。

Wikipedia より

misc.0o0o.org

やりたいこと

vue.jsでコンポーネント，cliを使わずに?index.htmlとmain.jsだけでグラフが書きたい (cliがまだよくわかっていないので，手を出したくない．．)

実装方法

試したこと

vue.jsを使わずにchart.jsだけでグラフを描いてみた
vue.jsのcreatedの中でグラフを描写 -> 失敗
mountedの中で描写　→　成功

理由?

reffect.co.jp

ライフサイクルで，コード内でidを取得しているから？ vueのcreatedではidがまだ作られていないため

成果

f:id:ka1357amnbpdr:20200106161416p:plain

コード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <title>Document</title>
</head>
<body>
    <div class="ui main continer">
        <div id="app">
            <canvas id="myChart" ></canvas>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <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>
    <script src="./main.js"></script>
</body>
</html>

new Vue({
    el: "#app",
    data: {
        ctx: null,
        chart:null
    },
    mounted: function () {
        this.ctx = document.getElementById("myChart");
        this.myChart = new Chart(this.ctx, {
            type: 'line',
            data: {
                labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                datasets: [{
                    label: 'test',
                    data: [12, 19, 3, 5, 2, 3],
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255,99,132,1)'
                    ],
                    borderWidth: 1
                }]
            },
        });
    },
    methods: {
    },
});