let ctx = document.getElementById('lineChart').getContext('2d');
let chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'line',

    // The data for our dataset
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 30, 45, 28, 60, 90, 115]
        }]
    },

    // Configuration options go here
    options: {
     title: {
       display: true,
       text: 'Demo Line Chart'
     },
     legend:{ 
       labels: { 
         fontColor: 'rgb(0, 0, 0)',
         usePointStyle: true
       } 
     },
     scales: {
       // 各軸標題設定
       // https://www.chartjs.org/docs/latest/axes/labelling.html
       // 各軸格線設定
       // https://www.chartjs.org/docs/latest/axes/styling.html
       // x 軸設置
       xAxes: [{
         // x 軸標題
         scaleLabel:{
           display: true,
           labelString:"Mouth",
           fontSize: 16
         },
         // x 軸格線
         gridLines: {
           display: true
         }
       }],
       // y 軸設置
       yAxes: [{
         // y 軸標題
         scaleLabel:{
           display: true,
           labelString:"Amount",
           fontSize: 16
         },
         // y 軸格線
         gridLines: {
           display: false
         },
         // y 軸間距
         ticks: {
           min: 0,
           max: 120,
           stepSize: 30
         }
       }]
     }
    }
});

new Chart(document.getElementById("radarChart"), {
    type: 'radar',
    data: {
      labels: ["A", "B", "C", "D", "E"],
      datasets: [
        {
          label: "1950",
          fill: true,
          backgroundColor: "rgba(179,181,198,0.2)",
          borderColor: "rgba(179,181,198,1)",
          pointBorderColor: "#fff",
          pointBackgroundColor: "rgba(179,181,198,1)",
          data: [1,2,3,5,6]
        }, {
          label: "2010",
          fill: true,
          backgroundColor: "rgba(255,99,132,0.2)",
          borderColor: "rgba(255,99,132,1)",
          pointBorderColor: "#fff",
          pointBackgroundColor: "rgba(255,99,132,1)",
          pointBorderColor: "#fff",
          data: [11,12,13,15,16]
        }
      ]
    },
    options: {
      title: {
        display: true,
        text: 'Distribution in % of world population'
      }
    }
});