Question

我想在外面的图表旁边添加标签，而不是工具提示，这是当前的默认值。我怎样才能做到这一点？我发现了这个问题How to add labels into Chart.js canvas plugin?，但它已经过时了，而且chartjs代码已不再相同了。我很乐意帮助你做一些改编！

Answer 1

进入控制器中的chart-create事件：

scope.$on('chart-create', function(event, chart) {
    var legend = chart.generateLegend();
    $(`#${chart.options.legendId}`).append(legend);
});

将选项中的legendId设置为您想要包含图例的元素的ID：

options = {
    legendId: 'test-pie-legend'
    ...

我还必须做一些CSS工作才能正确显示颜色：

.chart-legend li span {
    width: 1em;
    height: 1em;
    display: inline-block;
    margin-right: .5em;
}

.chart-legend li {
    list-style-type: none;
}

.chart-legend {
    margin-top: 3em; 
}

当然，你的图例持有人元素必须有这个类：

<div id="test-pie-legend" class="chart-legend"></div>

如何在甜甜圈图表angular-chartjs旁边添加标签

1 个答案: