如何在 Y 轴右侧显示与 Y 轴 ChartJS 左侧相同的标签

Question

我已经创建了一个在 Y 轴左侧显示金额的折线图，现在我必须在 Y 轴右侧显示左侧 Y 轴金额的百分比。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre><code>yAxes: [
                        {   
                            id: 'A',
                            fontFamily: "DINPRO, Arial, sans-serif",
                            ticks: {
                                callback: (value, index, values) => {
                                    window.values = values;
                                    let newValue = value;
                                    if (value >= 1000) {
                                        newValue = Math.floor(newValue / 1000);
                                        newValue += " Tsd.";
                                    }
                                    return newValue;
                                }
                            },
                            position: "left",
                            gridLines: {}
                        },
                        {   id: "B",
                            type: "linear",
                            display: true,
                            fontFamily: "DINPRO, Arial, sans-serif",
                            position: "right",
                            ticks: {
                              callback: (value, index, values) => {
                                // Here I will write percentage calculation logic but the values coming here is not same as left side of Y axis.
                            }
                        },

                    ]

Answer 1

基于在 Create Multiple Axis 中找到的代码 Chart.js 文档，这可以按如下方式完成：

const data = [20, 50, 78, 24, 18, 35];
const maxValue = Math.max.apply(null, data);

var myChart = new Chart("myChart", {
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    datasets: [{
      label: 'My Dataset',
      data: data     
    }]    
  },
  options: {    
    tooltips: {
      mode: 'x',
      callbacks: {
        label: (tooltipItem, data) => {
          var label = data.datasets[tooltipItem.datasetIndex].label || '';
          var percent = Math.round(1000 / maxValue * tooltipItem.yLabel) / 10;
          return label + ' ' + tooltipItem.yLabel + ' (' + percent + '%)';
        }
      }
    },
    scales: {
      yAxes: [{
        type: 'linear',
        ticks: {
          min: 0,
          max: maxValue,
          stepSize: maxValue / 10,
          callback: value => Math.round((100 / maxValue * value)) + '%'     
        }
      }, {
        type: 'linear',
        position: 'right',
        gridLines: {
          display: false
        },
        ticks: {
          min: 0,
          max: maxValue,
          stepSize: 1,
          autoSkip: false,
          callback: value => value % 10 == 0 || value == maxValue ? value : ''
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>