javascript - ChartJS 自定义图例甜甜圈将图例与图表区域分开

问题描述

我试图在ChartJS图表中将Legend与我分开。使用“默认”图例时，无法控制图表区域大小，并且图例中的项目越多，它就会变得越小......Chart

如果可以在Legend不改变Chart Area大小的情况下扩展，我很想听听任何这样做的人:)

我正在尝试的另一个选项是创建一个自定义Legend并将其插入为 innerHTML，并隐藏默认图例。

我尝试过使用以下解决方案legendCallback：

示例 1

示例 2

示例 3

但他们都对我不起作用......不知道为什么，我已经完全按照他们指定的方式完成了。

我认为这可能是ChartJS（我正在使用最新的）版本或其他一些数据问题阻止了图例的显示。

我的代码：

var chart1 = document.getElementById('displayVals').getContext('2d');
var mychart1 = new Chart(chart1, {
    type: 'doughnut',
    data: {
        labels: namelist,
        datasets: [{
            label: 'Doughnut Chart :)',
            data: valuelist,
            backgroundColor: GraphColors,
            borderWidth: 0
        }]
    },
    options: {
        layout: {
            padding: chartPadding
        },
        responsive: true,
        maintainAspectRatio: false,

        legend: {
            display: false
        },
        legendCallback: function (chart) {
            var text = [];
            text.push('<ul class="0-legend">');
            var ds = chart.data.datasets[0];
            var sum = ds.data.reduce(function add(a, b) { return a + b; }, 0);
            for (var i = 0; i < ds.data.length; i++) {
                text.push('<li>');
                var perc = Math.round(100 * ds.data[i] / sum, 0);
                text.push('<span style="background-color:' + ds.backgroundColor[i] + '">' + '</span>' + chart.data.labels[i] + ' (' + ds.data[i] + ') (' + perc + '%)');
                text.push('</li>');
            }
            text.push('</ul>');
            return text.join("");
        },

        plugins: {
            title: {
                display: true,                  
                text: 'Names',
                color: titleColor,
                padding: titlePadding,
                font: {
                    family: fontFamily,
                    size: fontSize,
                    style: fontStyle
                }
            }
        }
    }
})

var myLegendContainer = document.getElementById("legend1");
myLegendContainer.innerHTML = mychart1.generateLegend();

和html：

<div class="container">
    <div class="row">
        <div class="col-4">
            <div>
                <canvas class="doughnutChart" id="displayVals"></canvas>
            </div>
            <div id="legend1">test</div>
        </div>
</div>

我可以在中显示“测试”这个词，但仅此而已......

有任何想法吗..？

标签： javascripthtmljquerychart.jslegend

javascript - ChartJS 自定义图例甜甜圈将图例与图表区域分开

问题描述

解决方案

推荐阅读