Chart.jsの2つのy軸で同じデータ/ラベルを使用する方法

Question

私はangular-chart.jsで使用しているデータを1セット持っていますが、両方のy軸に同じデータセットを使用しますラベル、私は同じデータを2回チャートにしたくない）。両方のy軸のコードを複製すると、左の軸は正しいデータを示し、右の軸は最小の-1から最大のスケールを示します。同じラベルは、両方のy軸上に表示させる方法

... 
 
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; 
 
      } 
 
      } 
 
     } 
 
     } 
 
    ], ...

？

Answer 1

あなたは同じラベルを使用/表示するには、次のグラフプラグインを使用することができます/ 2異なる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>