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

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

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

})

---

在v1.0.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);

---

---

Fiddle-

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

---

预览

---

脚本

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);

---

---

Fiddle-

与chart.js 2.9.x一起使用此选项：

我认为，与规模扩展相比，这是一种更舒适的方法

---

下面是一个带有下划线的y记号标签。

对于chart.js 2.9.x，可以使用以下选项：

我认为，与规模扩展相比，这是一种更舒适的方法

---

这里是一个y记号标签加下划线的地方。

我感谢您的努力给出答案，但我希望得到更简单的答案，或者该选项已经存在于库中。该选项不在库的v1中（您正在使用的版本是查看数据）。干杯我很感谢您为给出答案所做的努力，但我希望得到更简单的答案，或者该选项已经存在于库中。该选项不存在于库的v1中（您正在使用的是查看数据的版本）。干杯