Chart.js 如何在charts.js中显示第二个y轴的标签？

我的charts.js散点图中有两个y轴，所有数据都正确显示

但是，当显示第一个y轴的标签时，第二个y轴的标签不显示

这是我的密码：

window.laChart = new Chart(ctx, {
    type: 'scatter',
    data: {
        datasets: allDatasets
    },
    options: {
        scales: {
            xAxes: [{
                scaleLabel: {
                    display: true,
                    labelString: X_AXIS_LABEL
                },
                ticks: {
                min: 0,
                max: 18,
                stepSize: 1,

                // Format the x-axis values
                callback: function(value, index, values) {
                    return value;// + ".000";
                }

                },
                gridLines: {
                    display: false
                }
            }],
            yAxes: [
            {
                ticks: {
                    beginAtZero: true,
                    min: 0,
                    max: 100
                },
                position: "left",
                id: "y-axis-1",
                type: "linear"
            },
            {
                ticks: {
                    beginAtZero: true,
                    min: 0,
                    suggestedMax: 10
                },
                position: "right",
                id: "y-axis-2",
                type: "linear"
            },
            {
                gridLines: {
                    display: false
                },
                ticks: {
                    maxTicksLimit: 3, // This will give us a top tick, middle tick and bottom tick.
                    callback: function(value, index) {
                    if (index === 1) { // This is the middle tick.
                        return Y1_AXIS_LABEL;
                    }
                    else {
                        return '';
                    }
                }
            }
        }]
    }
}

下面是第二个y轴标签缺失的屏幕截图：

如何显示第二个y轴的标签

解决方案

工作正常，但它给我留下了旋转的

labelString

s。我修改了他的答案，用最后的代码解决了这个问题：

yAxes: [
    {
    ticks: {
        beginAtZero: true,
        min: 0,
        max: 100
    },
    scaleLabel: {
        display: false,
        labelString: Y1_AXIS_LABEL
    },
    position: "left",
    id: "y-axis-1",
    type: "linear"
    },
    {
    ticks: {
        beginAtZero: true,
        min: 0
    },
    scaleLabel: {
        display: false,
        labelString: Y2_AXIS_LABEL
    },
    position: "right",
    id: "y-axis-2",
    type: "linear"
    },
    // Change the orientation of the first y-axis label.
    {
    gridLines: {
        display: false
    },
    ticks: {
        maxTicksLimit: 3, // This will give us a top tick, middle tick and bottom tick.
        callback: function(value, index) {
        if (index === 1) { // This is the middle tick.
            return Y1_AXIS_LABEL;
        }
        else {
            return '';
        }
        }
    },
    position: "left"
    },
    // Change the orientation of the second y-axis label.
    {
    gridLines: {
        display: false
    },
    ticks: {
        maxTicksLimit: 3, // This will give us a top tick, middle tick and bottom tick.
        callback: function(value, index) {
        if (index === 1) { // This is the middle tick.
            return Y2_AXIS_LABEL;
        }
        else {
            return '';
        }
        }
    },
    position: "right"
    }
]

最终截图：

---

您所做的是安装一个新的电子秤作为电子秤标签的替代品，这不是您应该采用的方式，因为电子秤将仅位于左侧。必须使用scalelabel，就像对两个Yax使用X轴一样，如下所示：

 yAxes: [
            {
                ticks: {
                    beginAtZero: true,
                    min: 0,
                    max: 100
                },
                scaleLabel: {
                    display: true,
                    labelString: Y1_AXIS_LABEL
                },
                position: "left",
                id: "y-axis-1",
                type: "linear"
            },
            {
                ticks: {
                    beginAtZero: true,
                    min: 0,
                    suggestedMax: 10
                },
                scaleLabel: {
                    display: true,
                    labelString: Y2_AXIS_LABEL
                },
                position: "right",
                id: "y-axis-2",
                type: "linear"
            }]