Angular-ChartJS将图例右对齐

Question

我正在使用Angular-ChartJs包装器来创建圆环图。我可以使用以下选项在右上方对齐图例：

legend: {
    display: true,
    position: 'right',
    fullWidth:true
}

在左侧图像上，您可以看到它是怎样的，在右侧图片上，您可以看到它应该如何。 （正确的图像不是完全正确的对齐，但你明白我的意思）

有没有办法用图表数据创建自定义图例，并将该图例“右中心”与图表对齐？

Answer 1

答案是'options ['legendCallback']'

1. 我使用元素属性'chart-options =“ $ ctrl.options”'将图表选项传递到画布上
2. 在图表选项'$ ctrl.options ['legend'] ['enabled'] = false'中禁用图例
3. 使用'$ ctrl.options ['legendCallback']'创建自己的图例

示例：

$ctrl.options['legendCallback'] = function(chart) {
    const text = []
    text.push('<div class="rr-doughnut-chart-legend">')
    // use dynamic legend id to handle multiple charts at once on one page
    text.push('<ul class="' + chart.id + '-legend">')

    // INSERT YOUR CUSTOM LEGEND HERE (perhaps generated automatically with chart object)

    text.push('</ul>')
    text.push('</div>')

    return text.join('')
}