JFreeChart 环形图表总计位于中心，未分成多行

Question

JFreeChart 环形图表总计位于中心，未分成多行。这是我尝试过的，这是我的输出：

我只是想创建一个JFreeChart，稍后用于转换为

BufferedImage

。

JFreeChart chartPage = ChartFactory.createRingChart("Incidents", donutDataset, true, true, false);
RingPlot donut = (RingPlot) chartPage.getPlot();

//      donut.setCenterTextMode(CenterTextMode.VALUE);
donut.setCenterTextMode(CenterTextMode.FIXED);
String total = "Total :\\n 450";
//      String total = "\<html\> Total \\n <br> :450 \</html\> ";

//      JLabel totalLabel = new JLabel(total);
donut.setCenterText(total);

我已经尝试过评论的场景 尝试过 JLabel 以及直接文本。 无论如何，它只会以单行形式出现 我想把它分成多行。

Answer 1

Highcharts.chart('container', {
    chart: {
        type: 'pie',
        backgroundColor: '#ffffff',
        margin: [0, 0, 0, 0],
        spacing: [0, 0, 0, 0]
    },
    title: {
        text: null
    },
    plotOptions: {
        pie: {
            innerSize: '70%',
            borderWidth: 5,
            borderColor: '#ffffff',
            dataLabels: {
                enabled: false
            },
            states: {
                hover: {
                    brightness: 0.1
                }
            },
            point: {
                events: {
                    mouseOver: function() {
                        updateCenterInfo(this.name, this.y, this.percentage);
                        updateInnerRing(this.color);
                    },
                    mouseOut: function() {
                        updateCenterInfo('Total', this.series.total, 100);
                        updateInnerRing('transparent');
                    }
                }
            }
        }
    },
    series: [{
        name: 'Categories',
        data: [
            { name: 'Category 1', y: 30, color: '#FFA500' },
            { name: 'Category 2', y: 25, color: '#87CEFA' },
            { name: 'Category 3', y: 20, color: '#90EE90' },
            { name: 'Category 4', y: 15, color: '#FF69B4' },
            { name: 'Category 5', y: 10, color: '#9370DB' }
        ]
    }, {
        name: 'Inner Ring',
        data: [{
            y: 100,
            color: 'transparent',
            borderWidth: 0
        }],
        innerSize: '90%',
        size: '70%',
        dataLabels: {
            enabled: false
        },
        states: {
            hover: { enabled: false }
        }
    }],
    tooltip: {
        enabled: false
    },
    credits: {
        enabled: false
    }
});

function updateCenterInfo(name, value, percentage) {
    const chart = Highcharts.charts[0];
    chart.setTitle({
        text: `<div style="text-align:center;">
                 <span style="font-size:16px">${name}</span><br>
                 <span style="font-size:24px;font-weight:bold">$${value}</span><br>
                 <span style="color:#FF69B4;font-size:16px">▲ ${percentage.toFixed(1)}% over</span>
               </div>`,
        align: 'center',
        verticalAlign: 'middle',
        y: 0,
        useHTML: true
    });
}

function updateInnerRing(color) {
    const chart = Highcharts.charts[0];
    chart.series[1].points[0].update({
        color: color
    });
}

// Initialize with total
const totalValue = Highcharts.charts[0].series[0].data.reduce((sum, point) => sum + point.y, 0);
updateCenterInfo('Total', totalValue, 100);