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

Question

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

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

                    ]





Thanks in advance !

Answer 1

基于从

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

                    ]

中找到的代码Chart.js文档，可以按以下步骤完成：

Create Multiple Axis

var myChart = new Chart("myChart", {
  type: 'line',
  data: {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
    datasets: [{
      data: [20, 50, 100, 75, 25, 0],
      label: 'My Dataset',
      yAxisID: 'left-y-axis'
    }]    
  },
  options: {
    scales: {
      yAxes: [{
        id: 'left-y-axis',
        type: 'linear',
        position: 'left',
        ticks: {
          callback: (value, index, values) => {
            let max = Math.max.apply(null, values);
            return (100 / max * value) + '%';
          }     
        }
      }, {
        id: 'right-y-axis',
        type: 'linear',
        position: 'right',
        ticks: {
          min: 0,
          max: 100
        }
      }]
    }
  }
});