Chart.js api

Chart.js

API 소개 : https://www.chartjs.org/

1. html에 링크 추가

<!-- 세로 바 차트 -->
<canvas id="bar-chart" width="300" height="230"></canvas>
<!-- 도넛 차트 -->
<canvas id="doughnut-chart" width="300" height="250"></canvas>
<!-- 가로 바 차트 -->
<canvas id="nutrient-chart" width="300" height="230"></canvas>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.min.js"></script>

2. js에 코그 추가

// 세로 바 차트
const data = {
    labels: [MonthDay[6], MonthDay[5], MonthDay[4], MonthDay[3], MonthDay[2], MonthDay[1], MonthDay[0]],
    datasets: [{
      label: '탄수화물',
      data: [carbohydrateSum[6], carbohydrateSum[5], carbohydrateSum[4], carbohydrateSum[3], carbohydrateSum[2], carbohydrateSum[1], carbohydrateSum[0]],
      backgroundColor: [
        'rgba(32, 178, 170, 0.2)'
      ],
      borderColor: [
        'rgba(32, 178, 170, 1)'
      ],
      borderWidth: 1
    },{
      label: '단백질',
      data: [proteinSum[6], proteinSum[5], proteinSum[4], proteinSum[3], proteinSum[2], proteinSum[1], proteinSum[0]],
      backgroundColor: [
        'rgba(255, 26, 104, 0.2)'
      ],
      borderColor: [
        'rgba(255, 26, 104, 1)'
      ],
      borderWidth: 1
    },{
      label: '지방',
      data: [fatSum[6], fatSum[5], fatSum[4], fatSum[3], fatSum[2], fatSum[1], fatSum[0]],
      backgroundColor: [
        'rgba(255, 206, 86, 0.2)'
      ],
      borderColor: [
        'rgba(255, 206, 86, 1)'
      ],
      borderWidth: 1
    }
    ]
  };

// config
  const config = {
    type: 'bar',
    data,
    options: {
      borderRadius: 5,
      barPercentage: 0.7,
      scales: {
        x:{
          stacked: true,
        },
        y: {
          stacked: true,
          beginAtZero: true
        }
      }
    }
  };

// render init block
  const barChart = new Chart(
      document.getElementById('bar-chart'),
      config
  );

  // 도넛 차트
 const dataDonut = {
    // labels: ['탄수화물', '단백질', '지방'],
    datasets: [{
      label: '영양소',
      data: [Math.round(carbohydrateTotal*4/registeredDateNum), Math.round(proteinTotal*4/registeredDateNum), Math.round(fatTotal*9/registeredDateNum)],
      backgroundColor: [
        'rgba(32, 178, 170, 0.2)',
        'rgba(255, 26, 104, 0.2)',
        'rgba(255, 206, 86, 0.2)'
      ],
      borderColor: [
        'rgba(32, 178, 170, 1)',
        'rgba(255, 26, 104, 1)',
        'rgba(255, 206, 86, 1)'
      ],
      borderWidth: 1
    }]
  };
// 도넛 차트 안에 텍스트 넣기
  const centerText = {
    id :'centerText',
    afterDatasetDraw(chart, args, options){
      const{ctx, chartArea: {left, right, top, buttom, width, height} } = chart;

      // Math.round((eatKcal/dayKcal) * 100)

      let text = Math.round(kcalTotal/registeredDateNum);
      if (isNaN(text)) {
        text = 0;
      }
      // 칼로리 값을 변수에 저장
      ctx.save();
      // console.log(top);
      ctx.font = '900 60px Nanum Gothic';
      ctx.fillStyle = 'rgba(50, 50, 50, 0.8)';
      ctx.textAlign = 'center';
      ctx.fillText(text, width/2 , height/2 + top-20);
      ctx.restore();

      ctx.save();
      // console.log(top);
      ctx.font = '900 30px Nanum Gothic';
      ctx.fillStyle = 'rgba(50, 50, 50, 0.8)';
      ctx.textAlign = 'center';
      ctx.fillText('kcal', width/2 , height/2 + top+40);
      ctx.restore();

    }
  }

// config
  const configDonut = {
    type: 'doughnut',
    data: dataDonut,
    // const dataDonut의 값을 넣어준것임
    options: {
      cutout:'90%',
      borderRadius:20
    },
    plugins:[centerText]
  };

// render init block
  const myChartDonut = new Chart(
      document.getElementById('doughnut-chart'),
      configDonut
// const configDonut임
  );

// 가로 바 차트
  const dataNutri = {
    labels: ['탄수화물(g)', '단백질(g)', '지방(g)', '당류(g)', '나트륨(g)', '콜레스테롤(g)', '포화지방산(g)', '트랜스지방(g)'],
    datasets: [{
      label: '섭취 영양성분',
      data: [Math.round(carbohydrateTotal/registeredDateNum), Math.round(proteinTotal/registeredDateNum), Math.round(fatTotal/registeredDateNum),
        Math.round(sugarsTotal/registeredDateNum), Math.round((sodiumTotal/1000)/registeredDateNum), Math.round((cholesterolTotal/1000)/registeredDateNum), Math.round(fattyAcidTotal/registeredDateNum),Math.round(transFatTotal/registeredDateNum)],
      backgroundColor: [
        'rgba(255, 139, 38, 0.2)',
        'rgba(255, 139, 38, 0.2)',
        'rgba(255, 139, 38, 0.2)',
        'rgba(255, 139, 38, 0.2)',
        'rgba(255, 139, 38, 0.2)',
        'rgba(255, 139, 38, 0.2)',
        'rgba(255, 139, 38, 0.2)',
        'rgba(255, 139, 38, 0.2)'

      ],
      borderColor: [
        'rgba(255, 139, 38, 1)',
        'rgba(255, 139, 38, 1)',
        'rgba(255, 139, 38, 1)',
        'rgba(255, 139, 38, 1)',
        'rgba(255, 139, 38, 1)',
        'rgba(255, 139, 38, 1)',
        'rgba(255, 139, 38, 1)',
        'rgba(255, 139, 38, 1)'
      ],
      borderWidth: 1,
      borderRadius: 5,
      barPercentage: 0.8
    }]
  };

// config
  const configNutri = {
    type: 'bar',
    data: dataNutri,
    options: {
      indexAxis: 'y',
      scales: {
        y: {
          beginAtZero: true,
          gride: {
            display: false,
            drawBorder: false
          }
        }
      }
    }
  };

// render init block
  const myChartNutri = new Chart(
      document.getElementById('nutrient-chart'),
      configNutri
  );

3. 시현