Question

嘿，我使用了很棒的Chart.js库，我想自定义图例项的样式。现在，当隐藏数据集时，在图例中我们可以看到一条直线。我想设置文本不透明度，例如。请问如何改变？

感谢您的帮助

Answer 1

不幸的是，如果您计划使用chart.js提供的自动生成的Legend，则没有真正简单的方法。虽然有可能。

如果你仔细阅读source，你会发现删除线实际上是在画布对象中呈现的（如下所示）。

var fillText = function(x, y, legendItem, textWidth) {
  ctx.fillText(legendItem.text, boxWidth + (fontSize / 2) + x, y);

  if (legendItem.hidden) {
    // Strikethrough the text if hidden
    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.moveTo(boxWidth + (fontSize / 2) + x, y + (fontSize / 2));
    ctx.lineTo(boxWidth + (fontSize / 2) + x + textWidth, y + (fontSize / 2));
    ctx.stroke();
  }
};

因此，要改变这种行为，您必须通过扩展Chart.Legend并实现自己的draw函数来自己实现它。由于您只关心更改此次要细节，因此您只需复制Chart.Legend draw函数并进行小幅更改。

var fillText = function(x, y, legendItem, textWidth) {
  if (legendItem.hidden) {
    // lighten the hidden text
    ctx.fillStyle = Chart.helpers.color(fontColor).lighten(0.75).rgbString();
  }

  ctx.fillText(legendItem.text, boxWidth + (fontSize / 2) + x, y); 

  // restore the original fillStyle so we dont impact the rest of the labels
  ctx.fillStyle = fontColor;
};

这是一个codepen，完全展示了我的意思（展示了如何正确扩展Chart.Legend）。

如果您想做一些比仅仅减轻文字更有趣的事情，我强烈建议您实施自己的自定义外部图例。您可以使用legendCallback配置选项并使用.generateLegend()原型方法执行此操作。

这是展示自定义外部图例的另一个codepen。由于图例现在位于画布对象的外部，因此您可以使用css和javascript对其进行样式设置。

Answer 2

看一下文档的这一部分： http://www.chartjs.org/docs/#chart-configuration-legend-configuration

我希望这会有所帮助。

隐藏数据集时更改图例项样式

2 个答案: