javascript - Angular-ChartJS 对齐图例右中心

Question

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

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

在左侧图像中，您可以看到它的样子，在右侧图片中，您可以看到它应该是什么样子。 (正确的图像并非完全正确对齐，但您明白我的意思)



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

Answer 1

答案是'options['legendCallback']'

我使用元素属性 'chart-options="$ctrl.options"'

将图表选项传递给 Canvas

禁用图表选项中的图例 '$ctrl.options['legend']['enabled'] = false'

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