javascript 使用chart.js在折线图中显示垂直轴标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32102186/
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
display vertical axis label in line chart using chart.js
提问by offeron
How to add a vertical axis (Y-axis) label for a line graph that was created using chart.js and angular-chart.js
如何为使用 chart.js 和 angular-chart.js 创建的折线图添加垂直轴（Y 轴）标签
I need to display y-axis label.
我需要显示 y 轴标签。
HTML
<ion-content ng-controller="AgeController">
<canvas id="line" class="chart chart-line" data="data"
labels="labels" legend="true" series="series"
click="onClick" colours="['Red','Yellow']" width="402" height="201" style="width: 402px; height: 201px">
</canvas>
</ion-content>
JS
app.controller('AgeController', ['$scope','$http',function($scope,$http) {
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.series = ['Series A', 'Series B'];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
}]);
回答by potatopeelings
The original opinion on the axis title is to do it outside of the canvas (see here https://github.com/nnnick/Chart.js/issues/114), but given the activity on the linked issue https://github.com/nnnick/Chart.js/issues/52this could change.
关于轴标题的原始意见是在画布之外进行（请参阅此处https://github.com/nnnick/Chart.js/issues/114），但考虑到链接问题https://github 上的活动.com/nnnick/Chart.js/issues/52这可能会改变。
Adding a Y Axis Title
添加 Y 轴标题
That said, here's how you can do it on the current version using the canvas. First, extend the chart to draw the axis title (mostly a rehash from How to set ChartJS y axis titlewith hopefully cleaner code)
也就是说，这里是您如何使用画布在当前版本上执行此操作。首先，扩展图表以绘制轴标题（主要是如何使用更简洁的代码设置 ChartJS y 轴标题的重新哈希）
Chart.types.Line.extend({
name: "LineAlt",
initialize: function (data) {
// making space for the title by increasing the y axis label width
if (this.options.yAxisLabel)
this.options.scaleLabel = ' ' + this.options.scaleLabel;
Chart.types.Line.prototype.initialize.apply(this, arguments);
if (this.options.yAxisLabel)
this.scale.yAxisLabel = this.options.yAxisLabel;
},
draw: function () {
Chart.types.Line.prototype.draw.apply(this, arguments);
// drawing the title
if (this.scale.yAxisLabel) {
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.2;
var y = this.chart.height / 2;
// change origin
ctx.translate(x, y)
// rotate text
ctx.rotate(-90 * Math.PI / 180);
ctx.fillText(this.scale.yAxisLabel, 0, 0);
ctx.restore();
}
}
});
From your directives, I assume you are using http://jtblin.github.io/angular-chart.js/. If so you register the new chart type like so
根据您的指令，我假设您正在使用http://jtblin.github.io/angular-chart.js/。如果是这样，您可以像这样注册新的图表类型
angular.module('chart.js')
.directive('chartLineAlt', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('LineAlt'); }]);
and you pass in the axis title using options like so
然后你使用像这样的选项传入轴标题
...
$scope.options = {
yAxisLabel: "My Y Axis Label",
}
with markup
带标记
<canvas id="line" class="chart chart-line-alt" data="data"
labels="labels" legend="true" series="series" options="options"
click="onClick" colours="['Red','Yellow']" width="402" height="201" style="width: 402px; height: 201px"></canvas>
Note the added optionsand the changed class chart-line-alt
注意添加options和更改的类chart-line-alt
Fiddle - http://jsfiddle.net/eeqfvy6f/
