[js] Chart.js mixed 차트 다중그래프(멀티차트) 사용하기

디자이너 및 개발자를위한 단순하면서도 유연한 JavaScript 차트 라이브러리

https://www.chartjs.org/

Chart.js | Open source HTML5 Charts for your website

https://www.chartjs.org/docs/latest/charts/mixed.html

두 개 이상의 서로 다른 차트 유형을 조합 한 혼합 차트를 만들 수 있습니다.

일반적인 예는 선 데이터 집합을 포함하는 막대 차트입니다.

 

기존 홈페이지 예시 에는 자세한 설명이 없어 여러 옵션을 주면 개발 하다 찾게 되었다

<script type="text/javascript" src="/js/chart.min.js"></script>
<script>
  var chartData = {
    labels: <?php echo json_encode($arr_date); ?>,        
    datasets: [{
      type: 'line',
      label: 'CTR',
      yAxisID: 'ctr-line',
      borderColor: '#444',
      borderWidth: 2,
      fill: false,
      data:  <?php echo json_encode($arr_ctr); ?>
    },{
      type: 'bar',
      label: 'PV',
      backgroundColor: '#f27173',
      data:  <?php echo json_encode($arr_pageview); ?>,
      borderColor: 'white',
      borderWidth: 2

    }, {
      type: 'bar',
      label: 'Click',
      yAxisID: 'clk-bar',
      backgroundColor: '#36A2EB',
      data:  <?php echo json_encode($arr_click); ?>
    }]
  };

 
 window.onload = function() {
   var ctx = document.getElementById('myChart').getContext('2d');
   window.myMixedChart = new Chart(ctx, {
    type: 'bar',
    data: chartData,
    options: {
     responsive: true,
     title: {
      display: true,
      text: '주간 차트'
    },
    tooltips: {
      mode: 'index',
      intersect: true
    },
    scales:{
      yAxes: [{
        display: true,
        stacked: true,
        scaleLabel: {
          display: true,
          labelString: 'pv'
        },
        ticks: {
          max: 10000,
          min: 0,
          stepSize: 2000
        }
      }, {
        id: 'clk-bar',
        display: false,
        stacked: false,
        scaleLabel: {
          display: false,
          labelString: 'ctr'
        },
        ticks: {
          max: 500,
          min: 0,
          stepSize: 5
        }
      }, {
        id: 'ctr-line',
        display: false,
        stacked: false,
        scaleLabel: {
          display: false,
          labelString: 'ctr'
        },
        ticks: {
          max: 2,
          min: 0,
          stepSize: 0.2
        }
      }]
    }
  }
});
 };
</script>

<div>
<canvas class="my-4 w-100" id="myChart" width="900" height="390"></canvas>
</div>