使用chart.js显示连接到标签的计数

xurqigkl 于 2022-11-07 发布在 Chart.js

关注(0)|答案(2)|浏览(180)

我正在使用Chart.js来构造饼图，有没有办法将Count连接到标签（在饼图图例中显示数字和百分比）？

createChart : function() {
    debugger;
    var chartData = [60, 90, 120, 150];
    var chartLabels = ['apples','bananas','oranges','pears'];
    var chartCanvas = component.find("chart").getElement();

    var chart = new Chart(chartCanvas, {
        type: 'pie',
        data: {
            labels: chartLabels,
                datasets: [
                    {
                        label: "test",
                        data: chartData,
                        borderWidth: 0,
                        backgroundColor: [
                            "#f43004",
                            "#decf3f",
                            "#FFA500"
                        ]
                    }
                ]
            },
            options: {
                cutoutPercentage: 1,
                maintainAspectRatio: false,
                legend: {
                    display: true,
                    position:'right',
                    fullWidth:false,
                    reverse:true,
                    labels: {
                        fontColor: '#000',
                        fontSize:10,
                        fontFamily:"Arial, sans-serif SANS_SERIF"
                    },
                    layout: {
                        padding: 70,
                    }
                }
            }
        });
    }

我试图构造这样的图表：

请提供任何建议或指针来实现这一点。
先谢谢你了。

chart.js

来源：https://stackoverflow.com/questions/48476520/show-count-concatenated-to-labels-using-chart-js

2条答案

按热度按时间

qyzbxkaa1#

您可以使用html-legends功能，以便自定义Chart.js图例：

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("");
}

这里有一把小提琴：https://jsfiddle.net/beaver71/b5hdn9gw/
第一个

赞(0）回复(0）举报 2022-11-07

sg3maiej2#

第一个

赞(0）回复(0）举报 2022-11-07