javascript - Chart.js 2.1.3 中的自定义图例

Question

有没有办法在 Chart.js 的饼图中移动和操作图例？具体来说，我想将它移到我的饼图的左侧或右侧，并以列表样式而不是内联形式显示它。我在文档中看到唯一的位置是顶部或底部，所以我尝试使用

隐藏默认图例

Chart.defaults.global.legend.display = false;

然后构建我自己的

document.getElementById('js-legend').innerHTML = myChart.generateLegend();

但这不会生成与图表对应的彩色图例框。

当前的javascript:

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels:generatedLabels,
        datasets: [{
            data: dataPoints,
            backgroundColor: generatedBackgroundColors
        }]
    }
});

html:

<div>
    <canvas id="myChart"></canvas>

</div>
<div id="js-legend" class="pieLegend"></div>

Answer 1

当您向所选元素添加自定义图例时，您还需要为该元素添加 CSS。添加后，将显示彩色框。

在您的情况下，您需要将以下 css 类添加到 div 元素。

.pieLegend li span{
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
}