Question

如何为使用chart.js和angular-chart.js创建的折线图添加垂直轴（Y轴）标签

我需要显示y轴标签。

12.method(:roundup).owner
# => IntegerWithRoundup

Answer 1

关于轴标题的原始意见是在画布之外进行（请参阅此处https://github.com/nnnick/Chart.js/issues/114），但考虑到关联问题https://github.com/nnnick/Chart.js/issues/52的活动，这可能会发生变化。

添加Y轴标题

也就是说，以下是使用画布在当前版本上执行此操作的方法。首先，扩展图表以绘制轴标题（主要是How to set ChartJS y axis title的重新散列，希望更清晰的代码）

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/

使用chart.js在折线图中显示垂直轴标签

1 个答案:

添加Y轴标题