如何在Charts.js中显示第二个y轴的标签? [英] How to show label for second y-axis in charts.js?

问题描述

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

但是，虽然显示了第一个y轴的标签，但没有显示第二个y轴的标签.

这是我的代码:

  window.laChart =新图表(ctx，{类型:散点图"，数据: {数据集:allDatasets}，选项: {比例尺:{x轴:[{scaleLabel:{显示:true，labelString:X_AXIS_LABEL}，滴答声:{最小值:0，最多:18，stepSize:1//格式化x轴值回调:函数(值，索引，值){返回值；//+.000"；}}，网格线: {显示:假}}]，轴:[{滴答声:{beginAtZero:是的，最小值:0，最多:100}，位置:左"，id:"y-axis-1"，类型:线性"}，{滴答声:{beginAtZero:是的，最小值:0，建议的最大值:10}，位置:正确"，id:"y-axis-2"，类型:线性"}，{网格线: {显示:假}，滴答声:{maxTicksLimit:3，//这将给我们一个顶部刻度线，一个中间刻度线和一个底部刻度线.回调:函数(值，索引){if(index === 1){//这是中间的刻度线.返回Y1_AXIS_LABEL;}别的 {返回 '​​';}}}}]}} 

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

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

解决方案

解决方案

您所做的是实现了一个新的秤来代替秤标签，这不是您应该这样做的方法，因为秤只会在左侧.对于两个yAx，您都必须像对X轴那样使用scalelabel:

  yAxes:[{滴答声:{beginAtZero:是的，最小值:0，最多:100}，scaleLabel:{显示:true，labelString:Y1_AXIS_LABEL}，位置:左"，id:"y-axis-1"，类型:线性"}，{滴答声:{beginAtZero:是的，最小值:0，建议的最大值:10}，scaleLabel:{显示:true，labelString:Y2_AXIS_LABEL}，位置:正确"，id:"y-axis-2"，类型:线性"}] 

I have two y-axis in my charts.js scatter chart, and all my data is displayed correctly.

However, whilst the label for the first y-axis is showing, the label for the second y-axis is not.

Here's my code:

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 '';
                    }
                }
            }
        }]
    }
}

And here's a screenshot with the second y-axis label missing:

How do I make the label for the second y-axis appear?

SOLUTION

LeeLenalee's answer worked, but it left me with rotated labelStrings. I adapted his answer to solve this issue with this final code:

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"
    }
]

Final screenshot:

解决方案

What you did is implement a new scale as replacement for the scale label, this is not the way you should do it because the scale will only be on the left. You have to use the scalelabel as you did with the X axis for both yAxes like this:

 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"
            }]

这篇关于如何在Charts.js中显示第二个y轴的标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！