如何从chart.js更改折线图中标签的背景颜色？

Question

有没有办法改变charts.js中标签的背景颜色。例如，我想在折线图中更改几个月的背景颜色：

var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [...]

};

v1.0.1中是否有选项？还是其他任何版本？

Answer 1

您可以扩展图表来执行此操作

预览

<强>脚本

Chart.types.Line.extend({
    name: "LineAlt",
    initialize: function(){
      // add some extra width the the y axis labels
      this.options.scaleLabel = "   " + this.options.scaleLabel;
      Chart.types.Line.prototype.initialize.apply(this, arguments);
    },
    draw: function(){
        Chart.types.Line.prototype.draw.apply(this, arguments);

        ctx.save();
        ctx.fillStyle = '#fcc';
        // the fill should be under the text
        ctx.globalCompositeOperation = "destination-over"

        // draw background under x axis labels
        Chart.helpers.each(this.scale.xLabels, function(label, index){
          var xPos = this.calculateX(index) + Chart.helpers.aliasPixel(this.lineWidth),
            isRotated = (this.xLabelRotation > 0);

          ctx.save();
          ctx.translate(xPos, (isRotated) ? this.endPoint + 12 : this.endPoint + 8);
          ctx.rotate(Chart.helpers.radians(this.xLabelRotation) * -1);
          var width = ctx.measureText(label).width;
          // add a 4px padding on each side
          // the height is set to 1.5 times the font size since there is no method to measure height easily
          ctx.fillRect(-width / 2 - 4, 0, width + 8, this.fontSize * 1.5);
          ctx.restore();
        }, this.scale)

        // draw background under y axis labels
        var yLabelGap = (this.scale.endPoint - this.scale.startPoint) / this.scale.steps,
            xStart = Math.round(this.scale.xScalePaddingLeft);
        Chart.helpers.each(this.scale.yLabels,function(labelString, index){
                    var yLabelCenter = this.endPoint - (yLabelGap * index);
          var width = ctx.measureText(labelString).width;
          // add some padding on the side - we don't need to increase the width because we use the width added by the extra space
          ctx.fillRect(xStart - width - 4, yLabelCenter - this.fontSize * 1.5 / 2, width, this.fontSize * 1.5);
        }, this.scale);

        ctx.restore();
    }
});

然后

...
new Chart(ctx).LineAlt(data);

小提琴 - http://jsfiddle.net/e894g5qn/

Answer 2

对于 chart.js 2.9.x，这可以通过 plugins 选项实现：

    plugins: [{
        afterDraw: function (chart, options) {

            let controller = chart.controller;
            let axis = controller.scales['y-axis-0'];
            let ctx = chart.ctx;

            let labelToStyle = null;

            axis._labelItems.forEach(function (value, index) {

                var labelToStyle = value
                let textWidth = ctx.measureText(labelToStyle.label).width;
                let line_x_start = labelToStyle.x - textWidth;
                let line_y = labelToStyle.y + (labelToStyle.font.size / 2) + 3

                ctx.lineWidth = 3;
                ctx.strokeStyle = 'orange';
                ctx.beginPath();
                ctx.moveTo(line_x_start, line_y);
                ctx.lineTo(labelToStyle.x, line_y);
                ctx.stroke();
            });

        }
    }]

我认为与 Scale extension 相比，这是一种更舒适的方法。

这是一个 FIDDLE，其中 y 刻度标签带有下划线。