Chart.js 2.6版:向饼图输出值添加箭头

a64a0gku  于 2022-11-07  发布在  Chart.js
关注(0)|答案(2)|浏览(204)

我正在使用Chart.js v2.6输出一个饼图。数据是从MySQL数据库中获得的。图表可以正确呈现,但我需要为数据值添加箭头,如下面的屏幕截图所示。
带箭头的饼图示例:

下面是我使用Chart.js输出饼图的代码:

var chartdata_order_status = {
    labels: status,
    datasets: [{
        label: 'Order status',
        backgroundColor: ["#00b0f0","#92d050","#ffc000","#ff6dd9"],
        data: count_status
    }]
};

var pieGraph = new Chart(ctx3, {
    type: 'pie',
    data: chartdata_country_orders,
    options: {
        pieceLabel: {
            mode: 'value',
            position: 'outside',
            fontColor: '#000',
            format: function (value) {
                return '$' + value;
            }
        },
        title: {
            display: true,
            text: 'Total Sales by Country - Top 5',
            fontSize: 15,
            fontStyle: 'bold'
        },
        legend: {
            display: true,
            position: 'bottom',
        },
    } 
});

我没有包括从MySQLtable获取数据的PHP代码。

jobtbby3

jobtbby31#

现在可以使用**Chart.PieceLabel.js**获取切片外部的标签。s,

演示版

第一个

yuvru6vn

yuvru6vn2#

对于chartjs 3.xx,您可以尝试以下操作
一个字

相关问题