首页 文章

Chart.js 2.1.3中的自定义图例

提问于
浏览 次
2

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

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

然后 Build 我自己的

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>
javascript charts

1 回答

  • 4

    在将自定义图例添加到所选元素时，还需要为该元素添加CSS . 添加后，将显示彩色框 .

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

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

相关问题