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('')
}