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;
}

Chart.js 2.1.3中的自定义图例

1 个答案: