카테고리 없음

tui-char bar chart 범위 조정, 범례 체크박스 삭제, bar 색상 처리, 추출메뉴 삭제

have a nice day :D 2021. 10. 26. 16:22
반응형

<div class="chart-bar">
<div id="chart-bar"></div>
</div>

const chart = toastui.Chart;

const el = document.getElementById('chart-bar');
const data = {
categories: ['연산', '사고력', '도형'], // 카테고리
series: [
     {
         name: '평균 점수',
         data: [

1.1, 2.7, 1.5

],
     },
     {
         name: '나의 점수',
         data: [

0.1, 0.1, 0.1

],
     },
     ],
};

const theme = {
     series: {
         barWidth: 20,
         colors: ['#d4d4d4', '#99a6e9'], // bar1 색상(그레이), bar2 색상(보라)
         areaOpacity: 1,
     },
};


const options = {
         legend: { visible: true, align: 'bottom', showCheckbox: false}, // 범례
          exportMenu: { visible: false }, // 추출메뉴 삭제
         chart: { width: '100%', height: 400 },
          theme,
          yAxis: { 
               scale: { // y축 범위 조정
               min: 0, // 최하
                max: 5, // 최상
                stepSize : 1 // 간격
                },
           },
     };

chart.columnChart({ el, data, options });

반응형