Chart.js图例样式

Question

我们一直在探索更改chart.js图例样式的方法，因为默认情况不适合我们正在创建的Web应用程序的样式/设计。我们对这个图书馆不熟悉，而且文档似乎没有给予太多帮助。

我们唯一能够改变的是图例中框的大小。我们正在寻找的可能是传说键是矩形/正方形，还是显示为中间点或只有一条线的线？

以下是我们的选项设置方式：

  labels: {
    fontColor: 'rgb(0,0,0)',
    boxWidth: 10,
    padding: 20
  },

我们想知道是否有一种简单的方法可以在标签选项中进行这些更改？

更新

这是目前设定的：

我们希望这些标签是一个正方形而是一条单线，中间可能有一个点？或至少一行。

我的一个问题是，如果图例被更改或自定义，是否会失去切换功能？

Answer 1

在chart.js中，可以完成的传奇配置非常少。你已经基本上在你的问题中提到了所有这些。这样做的原因是因为默认图例直接在canvas对象中呈现，并且很难对其进行参数化，因为canvas API并不简单。

尽管如此，chart.js的人们意识到我们需要更多的灵活性，他们提供了一种机制来创建/设计图表范围之外的图例。您可以使用legendCallback选项创建一个返回图例的HTML / CSS的函数，然后调用.generateLegend() prorotype方法进行渲染。

使用这种方法，您可以将图例放在HTML页面的任何位置，然后根据您认为适合普通的旧HTML / CSS的方式设置样式。

这是一个example，展示了如何做我正在描述的内容。我用CSS做的不是很好，所以我会把它留给你把盒子改成线条或者你想要的东西。

需要注意的一点是，使用外部图例会破坏图例与图表交互的能力。你必须自己建立这个。它可能有点复杂，取决于你想做什么，但没有什么是不可能的。

以下是外部自定义图例的another example，其中显示了一些图表交互。这里我们重点介绍图例项鼠标悬停的饼图区域。请参阅此other question（实际问您：D），了解如何操纵数据集切换。

您应该能够结合所有这些示例来构建您梦想的自定义外部传奇！如果您有具体问题，请告诉我。