Apex Charts饼图如何将秒数转换为HH:MM:SS格式

要实现将秒数转换为HH:MM:SS格式展示，核心是通过自定义格式化函数，在Apex Charts的对应配置项中对数据进行转换处理。以下是具体实现方案：

1. 编写秒转时间格式的通用函数 #

先定义一个工具函数，负责将秒数转换为标准的时分秒格式：

function secondsToHms(seconds) {
    const hours = Math.floor(seconds / 3600);
    const minutes = Math.floor((seconds % 3600) / 60);
    const secs = seconds % 60;
    // 补零确保每个部分都是两位数字
    return [hours, minutes, secs].map(val => val.toString().padStart(2, '0')).join(':');
}

2. 修改图表配置，应用格式化函数 #

在原有的配置中，针对图例、甜甜圈中心总计、tooltip三个关键展示区域添加格式化逻辑，修改后的完整代码如下：

<script>
function secondsToHms(seconds) {
    const hours = Math.floor(seconds / 3600);
    const minutes = Math.floor((seconds % 3600) / 60);
    const secs = seconds % 60;
    return [hours, minutes, secs].map(val => val.toString().padStart(2, '0')).join(':');
}

var options = {
    series: <?php echo json_encode($graphSmallTotal['data']); ?>,
    chart: {
        height: 300,
        type: 'donut',
    },
    dataLabels: {
        enabled: false
    },
    theme: {
        palette: 'palette2'
    },
    legend: {
        position: "bottom",
        horizontalAlign: 'left',
        // 图例标签格式化：显示项目名称+转换后的时间
        formatter: function(name, opts) {
            return `${name}: ${secondsToHms(opts.w.globals.series[opts.seriesIndex])}`;
        }
    },
    labels: <?php echo json_encode($graphSmallTotal['names']); ?>,
    colors: <?php echo json_encode($graphSmallTotal['colors']); ?>,
    plotOptions: {
        pie: {
            donut: {
                labels: {
                    name: {
                        show: false
                    },
                    label: {
                        show: false,
                        fontSize: '36px',
                    },
                    total: {
                        show: true,
                        // 甜甜圈中心总计格式化：显示总时长
                        formatter: function(w) {
                            const totalSeconds = w.globals.seriesTotals.reduce((a, b) => a + b, 0);
                            return `总时长\n${secondsToHms(totalSeconds)}`;
                        }
                    }
                }
            }
        }
    },
    tooltip: {
        // 鼠标悬停时显示格式化后的时间
        formatter: function(val) {
            return `${secondsToHms(val)}`;
        }
    }
};

var chart = new ApexCharts(document.querySelector("#byProject"), options);
chart.render();
</script>

关键配置说明 #

• 图例格式化：通过legend.formatter，将每个项目的名称与转换后的时长拼接，让图例信息更直观。
• 甜甜圈中心总计：通过plotOptions.pie.donut.labels.total.formatter，计算所有项目的总秒数并转换为时间格式展示。
• Tooltip格式化：鼠标悬停在扇区上时，直接显示转换后的时分秒格式，提升交互体验。

内容的提问来源于stack exchange，提问作者yortem