plotOptions - 在开头显示值

Question

这是我的圆环图 (ApexCharts)：

var options = {
            series: [umsatzSum, ausgabenSum, auslagenSum],
            chart: {
                type: 'donut',
                height: 320,
                fontFamily: chartFontStyle
            },
            labels: ["Umsatz", "Ausgaben", "Auslagen"],
            colors:['#7ebd0b', '#661818', "#333"],
            track: {
                background: "#cccccc"
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                colors:['#7ebd0b', '#661818', "#333"],
            },
            plotOptions: {
                pie: {
                    donut: {
                        labels: {
                            show: true,
                            value: {
                                formatter: function (val,chart) {
                                    let valPercent = val/chart.config.series.reduce((a, b) => a + b, 0)*100;
                                    return Math.round(valPercent) + "%"
                                }  
                            }
                        }
                    }
                }
            }
        
var chart = new ApexCharts(document.querySelector("#myChart"), options);
chart.render();

结果：

如果我将鼠标悬停在一个系列元素上，它会显示：

如果我点击系列元素，中间的百分比值会保留我如何才能意识到百分比值将显示在开头（在创建图表之后），而无需首先悬停或单击元素？

Answer 1

https://apexcharts.com/docs/options/plotoptions/pie/#total 未选择或悬停任何系列时将显示总计。

      labels: {
        show: true,
        value: {
          formatter: function (val,chart) {...}
        },
        total: {
          show: true,
          label: 'Umsatz',
          color: '#7ebd0b',
          formatter: function (chart) {
            let seriesToShowId = 0
            let val = chart.config.series[seriesToShowId]
            let valPercent = val/chart.config.series.reduce((a, b) => a + b, 0)*100;
            return Math.round(valPercent) + "%"
          }
        }
      }

plotOptions - 在开头显示值

plotOptions - show values at the beginning

javascript

html

apexcharts