Chart.js 如何增加分段大小以更均匀地分布

Question

我试图表示一些数据，它们之间存在很大差异，例如 [500, 30, 20, 5, 1, 1]，但我的图表并不真正可读。我怎样才能使饼图中的每个部分分布得更均匀。

async function drawPieChart(data, labels) {
    if (myChartPie != null) {
        myChartPie.destroy();
        resetCanvas();
    }

    let ctx = document.getElementById('myChart').getContext('2d');
    myChartPie = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: labels,
            datasets: [{
                label: "text",
                data: data,
                backgroundColor:(() => {
                    let bgcolors = []
                    let count = 0;
                    for (elem in data) {
                        count+=2;
                        bgcolors.push(Chart['colorschemes'].brewer.BuPu9[count])
                        if (count === 8) {
                            count = 0;
                        }
                    }
                    return bgcolors
                })
            }]
        },
        options: {
            percentageInnerCutout: 80,
            padding: 10,
            plugins: {
                datalabels: {
                    anchor: 'end',
                    align:'start',
                    color: '#fff',
                    borderWidth: 1,
                    borderColor: '#fff',
                    offset: -10,
                    borderRadius:100,
                    backgroundColor: "black",
                    font: {
                        weight: 'bold',
                        size: '15'
                    },
                    formatter: function(value) {
                        return value.scm_count;
                    }
                }
            },
            title: {
                display: true,
                text: 'Count versions of SCM',
                fontSize: 25,
                fontStyle: 'bold',
                fontColor: 'black',
            },
            legend: {
                padding: 30,
                display: true,
                fontColor: 'rgb(255, 99, 132)',
                position: "right",
                backgroundColor:(() => {
                    let bgcolors = []
                    let count = 0;
                    for (elem in data) {
                        count+=2;
                        bgcolors.push(Chart['colorschemes'].brewer.BuPu9[count])
                        if (count === 8) {
                            count = 0;
                        }
                    }
                    return bgcolors
                })
            },
            layout: {
                padding: {
                    left: 0,
                    right: 0,
                    top: 0,
                    bottom: 50
            }},
            responsive: true,
        },
        maintainAspectRatio: false,
    });
    Chart.plugins.register({
        beforeDraw: function(c) {
           var legends = c.legend.legendItems;
           let i = 0;
           legends.forEach(function(e) {
            i+=2;
              e.fillStyle = Chart['colorschemes'].brewer.BuPu9[i];
              if (i ===8)
              {
                  i = 0;
              }
           });
        }
     });

};

我希望较小的尺寸能增加一点以便可见。

我想以某种方式用百分比表示它们，但我找不到任何方法。

Answer 1

您确实无法在饼图（或任何）图表中很好地按比例显示非常小的值。

现在您可以更改比例以使用对数（请注意 Math.log(1) 例如 ln(1) 为 0）。像这样：

async function drawPieChart(data, labels) {
    if (myChartPie != null) {
        myChartPie.destroy();
        resetCanvas();
    }

    let ctx = document.getElementById('myChart').getContext('2d');
    myChartPie = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: labels,
            datasets: [{
                label: "text",
                data: data,
                backgroundColor:(() => {
                    let bgcolors = []
                    let count = 0;
                    for (elem in data) {
                        count+=2;
                        bgcolors.push(Chart['colorschemes'].brewer.BuPu9[count])
                        if (count === 8) {
                            count = 0;
                        }
                    }
                    return bgcolors
                })
            }]
        },
        options: {
            percentageInnerCutout: 80,
            padding: 10,
            plugins: {
                datalabels: {
                    anchor: 'end',
                    align:'start',
                    color: '#fff',
                    borderWidth: 1,
                    borderColor: '#fff',
                    offset: -10,
                    borderRadius:100,
                    backgroundColor: "black",
                    font: {
                        weight: 'bold',
                        size: '15'
                    },
                    formatter: function(value,I) {
                        //return value.scm_count;
                        return Math.exp(value).scm_count;
                    }
                }
            },
            title: {
                display: true,
                text: 'Count versions of SCM',
                fontSize: 25,
                fontStyle: 'bold',
                fontColor: 'black',
            },
            legend: {
                padding: 30,
                display: true,
                fontColor: 'rgb(255, 99, 132)',
                position: "right",
                backgroundColor:(() => {
                    let bgcolors = []
                    let count = 0;
                    for (elem in data) {
                        count+=2;
                        bgcolors.push(Chart['colorschemes'].brewer.BuPu9[count])
                        if (count === 8) {
                            count = 0;
                        }
                    }
                    return bgcolors
                })
            },
            layout: {
                padding: {
                    left: 0,
                    right: 0,
                    top: 0,
                    bottom: 50
            }},
            responsive: true,
        },
        maintainAspectRatio: false,
    });

        Chart.plugins.register({
        beforeDraw: function(c) {
           var legends = c.legend.legendItems;
           let i = 0;
           legends.forEach(function(e) {
            i+=2;
              e.fillStyle = Chart['colorschemes'].brewer.BuPu9[i];
              if (i ===8)
              {
                  i = 0;
              }
           });
        }
     });

};

var myChartPie;
var orig_data =  [500, 30, 20, 5, 1, 1];
var data = orig_data.map(function(e) { 
    if (e == 1) { e = 1.2 };
    e = Math.log(e); 
  return e;
});
var labels = ["One", "Two", "Three", "Four", "Five", "Six"];
drawPieChart(data,labels);

https://jsfiddle.net/mattsrinc/e4dLny2b/30/

在代码底部查看我如何使用对数值调整值。不过，您必须找到一种方法来更改标签以显示其原始值。

Chart.js 如何增加分段大小以更均匀地分布

Chart.js how to increase segments size to be more evenly distributed

javascript

charts

pie-chart

chart.js