Javascript 如何设置 ChartJS Y 轴标题？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31913967/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set ChartJS Y axis title?
提问by emir
I am using Chartjsfor showing diagrams and I need to set title of y axis, but there are no information about it in documentation.
我正在使用Chartjs来显示图表，我需要设置 y 轴的标题，但文档中没有关于它的信息。
I need y axis to be set like on picture, or on top of y axis so someone could now what is that parameter
我需要像图片一样设置 y 轴，或者在 y 轴的顶部，这样现在有人可以知道那个参数是什么
I have looked on official website but there was no information about it
我在官方网站上看过，但没有相关信息
采纳答案by potatopeelings
For Chart.js 2.x refer to andyhasit's answer - https://stackoverflow.com/a/36954319/360067
对于 Chart.js 2.x，请参考 andyhasit 的回答 - https://stackoverflow.com/a/36954319/360067
For Chart.js 1.x, you can tweak the options and extend the chart type to do this, like so
对于 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();
}
});
calling it like this
像这样称呼它
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%>"
});
Notice the space preceding the label value, this gives us space to write the y axis label without messing around with too much of Chart.js internals
注意标签值前面的空格，这为我们提供了编写 y 轴标签的空间，而不会弄乱太多 Chart.js 内部结构
Fiddle - http://jsfiddle.net/wyox23ga/
小提琴 - http://jsfiddle.net/wyox23ga/
回答by andyhasit
In Chart.js version 2.0 this is possible:
在 Chart.js 2.0 版中，这是可能的：
options = {
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'probability'
}
}]
}
}
See axes labelling documentationfor more details.
有关更多详细信息，请参阅轴标签文档。
回答by no.name.added
For x and y axes:
对于 x 和 y 轴：
options : {
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'probability'
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'hola'
}
}],
}
}
回答by Rajiv
chart.js supports this by defaul check the link. chartjs
chart.js 通过默认检查链接支持这一点。 图表
you can set the label in the options attribute.
您可以在 options 属性中设置标签。
options object looks like this.
选项对象看起来像这样。
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"
}
}
]
}
};
回答by no.name.added
For me it works like this:
对我来说，它是这样工作的：
options : {
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'probability'
}
}]
}
}
回答by Peter Manger
Consider using a the transform: rotate(-90deg) style on an element. See http://www.w3schools.com/cssref/css3_pr_transform.asp
考虑在元素上使用 transform: rotate(-90deg) 样式。见http://www.w3schools.com/cssref/css3_pr_transform.asp
Example, In your css
示例，在您的 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;
}
Add a space fudge factor to the Y Axis scale so the text has room to render in your javascript.
向 Y 轴比例添加一个空间软糖因子，以便文本有空间在您的 javascript 中呈现。
scaleLabel: " <%=value%>"
Then in your html after your chart canvas put something like...
然后在图表画布后的 html 中放置类似...
<div class="text-center verticaltext_content">Y Axis Label</div>
It is not the most elegant solution, but worked well when I had a few layers between the html and the chart code (using angular-chart and not wanting to change any source code).
这不是最优雅的解决方案，但是当我在 html 和图表代码之间有几层时效果很好（使用 angular-chart 并且不想更改任何源代码）。
