Chart.js에서 두 개의 y 축에 동일한 데이터/레이블을 사용하는 방법

Question

각도 차트에서 사용하는 하나의 데이터 집합이 있지만 두 축 모두 동일한 데이터 집합을 사용하도록합니다. 레이블, 동일한 데이터를 두 번 도표로 표시하지 않으려는 경우). 두 개의 y 축에 대한 코드를 복제하면 왼쪽 축은 올바른 데이터를 표시하고 오른쪽 축은 최소 -1에서 최대 1까지의 배율을 표시합니다.

... 
 
scales: { 
 
    yAxes: [{ 
 
     id: 'y-axis-1', 
 
     type: 'linear', 
 
     display: true, 
 
     position: 'left', 
 
     ticks: { 
 
      beginAtZero: false, 
 
      callback: function(value, index, values) { 
 
      if (parseInt(value) >= 1000) { 
 
       return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
 
      } else { 
 
       return '$' + value; 
 
      } 
 
      } 
 
     } 
 
     }, 
 
     { 
 
     id: 'y-axis-2', 
 
     type: 'linear', 
 
     display: true, 
 
     position: 'right', 
 
     ticks: { 
 
      beginAtZero: false, 
 
      callback: function(value, index, values) { 
 
      if (parseInt(value) >= 1000) { 
 
       return '$' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); 
 
      } else { 
 
       return '$' + value; 
 
      } 
 
      } 
 
     } 
 
     } 
 
    ], ...

어떻게 같은 라벨이 모두 Y 축에 표시 만들려면?

Answer 1

당신은 같은 레이블을 사용/표시하기 위해 다음 차트 플러그인을 사용할 수/두 개의 서로 다른 y 축에 틱 :

이

Chart.plugins.register({ 
    beforeInit: function(chart) { 
     chart.options.scales.yAxes[1].ticks.suggestedMin = Math.min.apply(this, chart.data.datasets[0].data); 
     chart.options.scales.yAxes[1].ticks.suggestedMax = Math.max.apply(this, chart.data.datasets[0].data); 
    } 
}); 

^{- 스크립트의 시작 부분이 추가}

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ

Chart.plugins.register({ 
 
    beforeInit: function(chart) { 
 
     chart.options.scales.yAxes[1].ticks.suggestedMin = Math.min.apply(this, chart.data.datasets[0].data); 
 
     chart.options.scales.yAxes[1].ticks.suggestedMax = Math.max.apply(this, chart.data.datasets[0].data); 
 
    } 
 
}); 
 

 
var chart = new Chart(ctx, { 
 
    type: 'line', 
 
    data: { 
 
     labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'], 
 
     datasets: [{ 
 
     label: 'LINE', 
 
     data: [3, 1, 4, 2, 5], 
 
     backgroundColor: 'rgba(0, 119, 290, 0.2)', 
 
     borderColor: 'rgba(0, 119, 290, 0.6)', 
 
     fill: false 
 
     }] 
 
    }, 
 
    options: { 
 
     scales: { 
 
     yAxes: [{ 
 
      id: 'y-axis-0', 
 
      position: 'left', 
 
      ticks: { 
 
       stepSize: 1 
 
      } 
 
     }, { 
 
      id: 'y-axis-1', 
 
      position: 'right', 
 
      ticks: { 
 
       stepSize: 1 
 
      } 
 
     }] 
 
     } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 
 
<canvas id="ctx"></canvas>