비엔시스템 코드 구축

Chart

차트는 데이터를 그래픽으로 표현할 때 사용된다.
기본적으로 사용되는 라이브러리는 Chart.js 이다. ( https://www.chartjs.org/ )
Line

Basic
                
                  <!-- 차트 기본 옵션 -->

                  const labels = ["Jan","Feb","Mar","Apr","Mai","Jun"];
                  const dataList = [80,45,23,48,17,100];
                  
                  const chartBasic01 = document.querySelector('.chart-basic-01');
                  window.myChart = new Chart(chartBasic01, {
                      type: 'line',
                      data: {
                          labels: labels,
                          datasets: [
                              {
                                  label: 'Product 1',
                                  data: dataList,
                                  borderWidth:2,
                                  borderColor: '#165BAA',
                                  backgroundColor: '#165BAA',
                                  pointRadius:3,
                              },
                          ],
                      },
                      options: {
                          layout: {
                              padding:{
                                left:-12,
                              },
                          },
                          scales:{
                              x:{
                                  grid:{ 
                                      drawTicks:false, //영역 밖으로 넘어간 그리드 선 삭제
                                      color:"#ECECEC"  
                                  }, 
                                  ticks:{
                                    font:{
                                        size: 12,
                                      },
                                      color:'#4F4F4F',
                                  }
                              },
                              y:{
                                  grid:{
                                      drawTicks:false,
                                      color:"#ECECEC"  
                                  },
                                  beginAtZero: true, // 0부터 시작
                                  suggestedMax: 120, // 권장 최댓값
                                  ticks:{
                                      font:{
                                        size: 12,
                                      },
                                      color:'#4F4F4F',
                                      stepSize: 20, //고정 단계
                                      padding: 12,
                                  },
                              },
                          },
                          plugins: {
                              // 일반 범례
                              legend: {
                                  display: true,
                                  position:'bottom',
                                  align:'start',
                                  labels: {
                                      padding: 40,
                                  }
                              },
                              tooltip: {
                                  enabled: true,
                              },
                          },
                  
                          animation: true,
                          maintainAspectRatio: true, //크기 조정 시차트의 비율 유지
                          devicePixelRatio: 1.5, //해상도 증가
                          aspectRatio: 1.2, //차트의 비율 (가로/세로)
                      },
                  }); 
                
              