如何设置 ChartJS Y 轴标题？

Posted 2023-02-16

【中文标题】如何设置 ChartJS Y 轴标题？

【英文标题】：How to set ChartJS Y axis title?

【发布时间】：2015-11-02 00:54:00

【问题描述】：

我正在使用Chartjs 来显示图表，我需要设置 y 轴的标题，但文档中没有关于它的信息。

我需要像在图片上那样设置 y 轴，或者在 y 轴上设置，这样现在有人可以知道那个参数是什么

我在官方网站上看过，但没有相关信息

【问题讨论】：

参考这个thread你可以使用这个更新的插件github.com/FVANCOP/ChartNew.js。这不是最好的解决方案，但会起作用。

【参考方案1】：

在 Chart.js 2.0 版中，这是可能的：

options = 
  scales: 
    yAxes: [
      scaleLabel: 
        display: true,
        labelString: 'probability'
      
    ]
  

更多详情请见axes labelling documentation。

【讨论】：

这对我不起作用 - 也许还有另一个步骤也与显示标签相关？

不看你的代码就很难说。它适用于不同的图表，还是仅适用于特定的图表？如果将图表放在页面的其他位置会发生什么？你检查过 Chart.js 的版本吗？

这非常适合我，谢谢。 （我正在使用Chart-2.1.4.min.js 库。）

@andyhasit 如果我有多个 y 轴，如何为每个 y 刻度设置标签？ （注意：我使用的是角图）。

@GeorgeLica 你只需重复[ 和] 之间的部分。假设您已经有多个 yAxes，所以只需将 scaleLabel 添加到每个。

【参考方案2】：

对于 Chart.js 2.x，请参阅 andyhasit 的回答 - https://***.com/a/36954319/360067

对于 Chart.js 1.x，您可以调整选项并扩展图表类型以执行此操作，就像这样

Chart.types.Line.extend(
    name: "LineAlt",
    draw: function () 
        Chart.types.Line.prototype.draw.apply(this, arguments);

        var ctx = this.chart.ctx;
        ctx.save();
        // text alignment and color
        ctx.textAlign = "center";
        ctx.textBaseline = "bottom";
        ctx.fillStyle = this.options.scaleFontColor;
        // position
        var x = this.scale.xScalePaddingLeft * 0.4;
        var y = this.chart.height / 2;
        // change origin
        ctx.translate(x, y);
        // rotate text
        ctx.rotate(-90 * Math.PI / 180);
        ctx.fillText(this.datasets[0].label, 0, 0);
        ctx.restore();
    
);

这样称呼它

var ctx = document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx).LineAlt(data, 
    // make enough space on the right side of the graph
    scaleLabel: "          <%=value%>"
);

注意标签值前面的空格，这为我们提供了编写 y 轴标签的空间，而不会弄乱 Chart.js 内部的太多内容

---

小提琴 - http://jsfiddle.net/wyox23ga/

---

【讨论】：

@Hajjat​​ - 你可以发布一个新问题和/或解决这个问题。干杯！

条形图可以吗？

@Guru - 是的，只需将上面所说的 Line to Bar 的所有内容都更改一下，它就会起作用。

@Thunder - 你是对的 - 你需要为 x 轴标签腾出空间。你想快速搜索一下是否已经存在这样的问题吗？如果没有，您可能想要创建一个新问题（当前问题有点过于关注 y 轴，无法考虑使其通用而不进行大量更改）。干杯！

@jmercouris - 在答案顶部添加了一条注释。我认为问题是针对 1.x 的（不记得当时是否有 2.x）。干杯！

【参考方案3】：

对于 x 和 y 轴：

     options : 
      scales: 
        yAxes: [
          scaleLabel: 
            display: true,
            labelString: 'probability'
          
        ],
        xAxes: [
          scaleLabel: 
            display: true,
            labelString: 'hola'
          
        ],
      
    

【参考方案4】：

chart.js 通过默认检查链接来支持这一点。 chartjs

您可以在选项属性中设置标签。

options 对象如下所示。

options = 
            scales: 
                yAxes: [
                    
                        id: 'y-axis-1',
                        display: true,
                        position: 'left',
                        ticks: 
                            callback: function(value, index, values) 
                                return value + "%";
                            
                        ,
                        scaleLabel:
                            display: true,
                            labelString: 'Average Personal Income',
                            fontColor: "#546372"
                        
                       
                ]
            
        ;

【参考方案5】：

对于 Chart.js 3.x

options: 
  scales: 
    y: 
      title: 
        display: true,
        text: 'Y axis title'
      
    
  

【参考方案6】：

对我来说是这样的：

    options : 
      scales: 
        yAxes: [
          scaleLabel: 
            display: true,
            labelString: 'probability'
          
        ]
      
    

【参考方案7】：

考虑在元素上使用 transform: rotate(-90deg) 样式。 见http://www.w3schools.com/cs-s-ref/css3_pr_transform.asp

例如， 在你的 CSS 中

.verticaltext_content 
  position: relative;
  transform: rotate(-90deg);
  right:90px;   //These three positions need adjusting
  bottom:150px; //based on your actual chart size
  width:200px;

为 Y 轴比例添加一个空间软糖因子，以便文本有空间在您的 javascript 中呈现。

scaleLabel: "      <%=value%>"

然后在您的图表画布之后的 html 中放置类似...

<div class="text-center verticaltext_content">Y Axis Label</div>

这不是最优雅的解决方案，但当我在 html 和图表代码之间有几层时效果很好（使用 angular-chart 并且不想更改任何源代码）。