Chart.js中的自定义图例2.1.3 [英] Custom Legend in Chart.js 2.1.3

问题描述

有没有办法在Chart.js的饼图中移动和操作图例？
具体来说，我想将它移动到我的饼图的左边或右边，并且它在列表风格而不是内联。我在文档中看到，唯一的位置是顶部或底部，所以我试图隐藏默认图例与

Is there a way to move and manipulate the legend in the Pie chart for Chart.js? Specifically I want to move it to the left or right of my pie chart and have it in a list-style instead of inline. I see in the documentation that the only positions are top or bottom so I tried hiding the default legend with

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

然后使用

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

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

But this doesn't generate the colored legend boxes that correspond with the chart.

目前的javascript：

current 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>

推荐答案

，您还需要为该元素添加CSS。一旦你添加它，将显示彩色框。

When you are adding custom legend to element of your choice, you need to also add CSS for that element. Once you add it colored boxes will be shown.

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

In your case you need to add below css class to div element.

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

这篇关于Chart.js中的自定义图例2.1.3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！