如何设置 ChartJS 的 Y 轴标题？

Question

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

我需要将y轴设置成如图所示的样子，或者在y轴的顶部添加标题，以便人们知道该参数是什么。

我已经查看了官方网站，但没有相关信息。

- emir

---

参考这个帖子，你可以使用这个更新的插件https://github.com/FVANCOP/ChartNew.js。这可能不是最好的解决方案，但可以工作。 - karan3112

Answer 1

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

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

请参阅坐标轴标签文档以获取更多详细信息。

- andyhasit

---

这对我来说没有起作用 - 也许还有另一步骤与显示标签相关？ - evansjohnson

这对我来说完美地运行了，谢谢。（我正在使用 Chart-2.1.4.min.js 库。） - Bobulous

@andyhasit 如果我有多个y轴，如何为每个y刻度设置标签？（注意：我正在使用angular-chart）。 - George Lica

@GeorgeLica 你只需重复[和]之间的部分。可能你已经有了多个y轴，所以只需在每个轴上添加scaleLabel即可。 - Mark

你能把标题放在轴的顶部吗？（如果是Y轴） - Marketa Vlach

Answer 2

对于Chart.js 1.x，您可以调整选项并扩展图表类型以实现此目的，操作如下：

有关Chart.js 2.x，请参考andyhasit的答案 - https://dev59.com/rFwZ5IYBdhLWcg3wDMi9#36954319

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的内部太多。

---

Fiddle - http://jsfiddle.net/wyox23ga/

---

- potatopeelings

---

@Thunder - 我猜是这样，但代码会有所不同。对于y轴，我们可以使用轴刻度标签来为轴标签腾出空间。对于x轴，我认为我们需要做一些其他的事情。 - potatopeelings

@ptatopeelings 我可以添加x轴名称，但无法在图表下方创建空间以正确放置它，使用y作为this.chart.height会使文本与x轴标签重叠。 - Thunder

@potatopeelings，我试图将线图转换为水平条形图。但它并没有达到我想要的效果。 - Guru

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

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

Answer 3

对于x和y轴：

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

- no.name.added

Answer 4

对于 Chart.js 3.x

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

- ssserebrov

---

要查看轴标题当前可用的所有配置（3.x），请访问以下链接：https://www.chartjs.org/docs/latest/samples/scale-options/titles.html - IvanAllue

Answer 5

chart.js默认支持此功能，请查看链接 chartjs。

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

选项对象类似于这样。

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

- Rajiv

Answer 6

对我来说，它的工作方式如下：

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

- no.name.added

Answer 7

考虑在元素上使用 transform: rotate(-90deg) 样式。 参见http://www.w3schools.com/cssref/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;
}

在你的javascript中，为Y轴比例尺添加一个空间调整因子，以便文本有足够的空间进行渲染。

scaleLabel: "      <%=value%>"

在你的图表画布后面，可以在html中添加类似以下内容的代码...

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

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

- Peter Manger