Chart.js V2 格式/样式标签

Question

因此，在 chart.js 的第 1 版中，我们可以使用 legendTemplates 来设置图表标签显示位置和显示方式的格式和样式。但是，自从切换到 v2 后，我似乎找不到等效项。请参阅下面的饼图示例，其中标签的方式已压缩。

理想情况下，我可以使用一些表单选项来移动、展开或以其他方式设置这些标签的样式。

这是我使用的旧图例模板的示例

legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend text-center\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label.capitalizeFirstLetter()%><%}%></li><%}%></ul>"

Answer 1

您可以使用配置选项部分配置图例，如下所述： http://www.chartjs.org/docs/latest/configuration/legend.html

示例：

var chartInstance = new Chart(ctx, {
    type: 'pie',
    data: data,
    options: {
        legend: {
            position: 'left',
            labels: {
                boxWidth: 15,
                padding: 20
            }
        }
    }
})

此代码会将图例移到图表的左侧，使彩色框变小，并增加图例项之间的空白量。

工作 JSFiddle：https://jsfiddle.net/o81qqrLn/1/

您可以在上面链接的文档中查看可配置图例和标签选项的完整列表。

Chart.js V2 格式/样式标签

Chart.js V2 formatting / styling labels

javascript

css

charts

chart.js

chart.js2