我正在使用Chartjs 来显示图表，我需要设置 y 轴的标题，但文档中没有关于它的信息。
我需要像在图片上那样设置 y 轴，或者在 y 轴上设置，这样现在有人可以知道那个参数是什么
我在官方网站上看过，但没有相关信息
【问题讨论】：
标签： javascript jquery charts chart.js
在 Chart.js 2.0 版中，这是可能的：
options = {
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'probability'
}
}]
}
}
更多详情请见axes labelling documentation。
【讨论】：
Chart-2.1.4.min.js 库。）
[ 和] 之间的部分。假设您已经有多个 yAxes，所以只需将 scaleLabel 添加到每个。
对于 Chart.js 2.x，请参阅 andyhasit 的回答 - https://stackoverflow.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/
【讨论】：
对于 x 和 y 轴：
options : {
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'probability'
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'hola'
}
}],
}
}
【讨论】：
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"
}
}
]
}
};
【讨论】：
对于 Chart.js 3.x
options: {
scales: {
y: {
title: {
display: true,
text: 'Y axis title'
}
}
}
}
【讨论】：
对我来说是这样的：
options : {
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'probability'
}
}]
}
}
【讨论】：
考虑在元素上使用 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;
}
为 Y 轴比例添加一个空间软糖因子，以便文本有空间在您的 javascript 中呈现。
scaleLabel: " <%=value%>"
然后在您的图表画布之后的 html 中放置类似...
<div class="text-center verticaltext_content">Y Axis Label</div>
这不是最优雅的解决方案，但当我在 html 和图表代码之间有几层时效果很好（使用 angular-chart 并且不想更改任何源代码）。
【讨论】：