甜甜圈间距

Question

我正在尝试实现与此类似的效果 doughnut example 希望每一块都相互隔开，如果可能的话，把边缘弄圆我对 chartjs 还很陌生，所以我没能找到一些与之相关的答案

这是我当前的图表 js 代码

    const labelsd = <?php echo $jswallet;?>;
    const data = {
        labels: labelsd,
        datasets: [
        {
            label: "Wallets",
            data: <?php echo $jsamount;?>,
            backgroundColor: [
                "#1D7A46",
                "#C724B1",
                "#c7243f",
                "#0E75F1",
                "#2E8B57"
            ],
            borderColor: [
                "#1D7A46",
                "#C724B1",
                "#c7243f",
                "#0E75F1",
                "#1D7A46"
            ],
            borderWidth: [1, 1, 1, 1, 1]
        }
        ]
    };
    const config = {
        type: 'doughnut',
        data: data,
        options: {
            cutout: 140,
            responsive: true,
            plugins: {
                legend:{display: false},
                title: {display: false,}
            }
        },
    };
    const minutedownloads = new Chart(
        document.getElementById('dailyspendings'),
        config
    );

Answer 1

在您的图形选项中，像这样设置 cutout: "95%" 和 borderRadius: 3

const labelsd = <?php echo $jswallet;?>;
const data = {
    labels: labelsd,
    datasets: [
    {
        label: "Wallets",
        data: <?php echo $jsamount;?>,
        backgroundColor: [
            "#1D7A46",
            "#C724B1",
            "#c7243f",
            "#0E75F1",
            "#2E8B57"
        ],
        borderColor: [
            "#1D7A46",
            "#C724B1",
            "#c7243f",
            "#0E75F1",
            "#1D7A46"
        ],
        borderWidth: [1, 1, 1, 1, 1]
    }
    ]
};
const config = {
    type: 'doughnut',
    data: data,
    options: {
        cutout: "95%",
        borderRadius: 3,
        responsive: true,
        plugins: {
            legend:{display: false},
            title: {display: false,}
        }
    },
};
const minutedownloads = new Chart(
    document.getElementById('dailyspendings'),
    config
);

甜甜圈间距

Doughnut spacing

javascript

chart.js