[英]display vertical axis label in line chart using chart.js
如何為使用chart.js和angular-chart.js創建的折線圖添加垂直軸(Y軸)標簽
我需要顯示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]
];
}]);
有關軸標題的原始意見是在畫布之外進行操作(請參閱此處https://github.com/nnnick/Chart.js/issues/114 ),但是鑒於鏈接問題的活動https:// github .com / nnnick / Chart.js / issues / 52,這可能會更改。
就是說,這是在畫布上使用當前版本的方法。 首先,擴展圖表以繪制軸標題(主要是“ 如何使用希望更干凈的代碼設置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();
}
}
});
根據您的指令,我假設您正在使用http://jtblin.github.io/angular-chart.js/ 。 如果是這樣,您可以像這樣注冊新的圖表類型
angular.module('chart.js')
.directive('chartLineAlt', ['ChartJsFactory', function (ChartJsFactory) { return new ChartJsFactory('LineAlt'); }]);
然后使用類似的選項傳遞軸標題
...
$scope.options = {
yAxisLabel: "My Y Axis Label",
}
帶有標記
<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>
注意添加的options
和更改的類chart-line-alt
小提琴-http: //jsfiddle.net/eeqfvy6f/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.