ChartJSを使用したグラフの作成

by Matsunaga_Ajike

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
 <canvas id="chartjs" width="400" height="200"></canvas>

JavaScript

var ctx = document.getElementById('chartjs').getContext('2d');
var monthsPriceChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        datasets: [{
            label: '取得ポイント',
            data: [13000, 11000, 14900, 8000, 19000, 12000, 10000, 18000, 11000, 13000, 14900, 18000],
            borderColor: 'rgba(54, 162, 235, 1)',
            backgroundColor: 'rgba(54, 162, 235, 0.05)',
            borderWidth: 1
        }]
    },
    options: {
        title: {
            display: true,
            fontColor: '#334d6e',
            fontSize: '20',
            text: '2019年',
        }
    }
});