ApexCharts鼠标悬停显示[object Object]问题求助（Angular 11）

使用Angular 11搭配ApexCharts 3.19.0版本，鼠标悬停在图表任意区域时，图表顶部中间会显示“[object Object]”。已尝试配置x轴、y轴、提示框等多项设置，但均无效。

图表配置代码如下：

// Build chart options
this.chartOptions = {
    series: [
        {
            name: this.chartTranslations['privateTransport.usageReport.chart.STOPPED'],
            data: usageReport.history.map((history: HistoryReport) => history.stoppedTime || 0),
        },
        {
            name: this.chartTranslations['privateTransport.usageReport.chart.IDLE'],
            data: usageReport.history.map((history: HistoryReport) => history.idleTime || 0),
        },
        {
            name: this.chartTranslations['privateTransport.usageReport.chart.DRIVING'],
            data: usageReport.history.map((history: HistoryReport) => history.drivingTime || 0),
        },
    ],
    colors: ['#90989b', '#fc9337', '#54bdea'],
    chart: {
        type: "bar",
        width: '100%',
        height: 500,
        stacked: true,
        stackType: "100%",
        zoom: {
            enabled: false,
        },
        animations: {
            enabled: false,
        }
    },
    plotOptions: {
        bar: {
            columnWidth: width,
            dataLabels: {
                position: 'top',
            }
        }
    },
    responsive: [
        {
            breakpoint: 480,
            options: {
                legend: {
                    position: "bottom",
                    offsetX: -10,
                    offsetY: 0
                }
            }
        }
    ],
    xaxis: {
        type: 'datetime',
        categories: usageReport.history.map((history: HistoryReport) =>
            new Date(history.serviceDate).getTime()
        ),
        // This is maybe slower than the one above, but we need test which one works better in real cases
        // categories: usageReport.history.map((history: HistoryReport) => moment(history.serviceDate).format('DD/MM/YYYY HH:mm').toString()),
    },
    fill: {
        opacity: 1
    },
    legend: {
        position: "top",
        onItemHover: {
            highlightDataSeries: true
        },
        offsetX: 0,
        offsetY: 0,
    },
    tooltip: {
        y: {
            formatter: (value: number) => {
                if (typeof value !== "number") return "0h 0m 0s"
                const hours = Math.floor(value / 3600);
                const minutes = Math.floor((value % 3600) / 60);
                const seconds = value % 60;
                return `${hours}h ${minutes}m ${seconds}s`;
            },
        },
        // If xaxis is not datetime, delete this
        x: {
            format: 'dd/MM/yyyy HH:mm'
        }
    },
};

这个问题是ApexCharts 3.x旧版本结合datetime类型x轴时的常见格式化bug，“[object Object]”是因为某个需要输出字符串的配置项返回了对象，以下是针对性解决方法：

1. 显式配置x轴十字线（crosshairs）的标签格式化 #

在xaxis配置中添加crosshairs字段，手动指定日期格式化逻辑，确保返回字符串：

xaxis: {
    type: 'datetime',
    categories: usageReport.history.map((history: HistoryReport) =>
        new Date(history.serviceDate).getTime()
    ),
    // 添加以下配置
    crosshairs: {
        show: true,
        label: {
            formatter: (val) => {
                return new Date(val).toLocaleString('zh-CN', { 
                    day: '2-digit', 
                    month: '2-digit', 
                    year: 'numeric', 
                    hour: '2-digit', 
                    minute: '2-digit' 
                });
            }
        }
    }
},

2. 验证series的name是否为字符串 #

检查this.chartTranslations对应的取值是否为纯字符串，避免返回对象。可以临时替换为静态字符串测试：

series: [
    {
        name: '停止时间', // 临时替换翻译值
        data: usageReport.history.map((history: HistoryReport) => history.stoppedTime || 0),
    },
    // 其他series同理
]

如果替换后问题消失，说明i18n翻译配置存在问题，需要排查翻译对象的取值逻辑。

3. 升级ApexCharts版本 #

3.19.0存在不少已知的格式化漏洞，升级到与Angular 11兼容的较新版本（如3.35.x），可以直接修复这类底层bug。注意升级时同步更新ng-apexcharts依赖版本，确保与Angular版本匹配。

4. 调整tooltip的x轴格式化逻辑 #

如果上述方法无效，尝试将tooltip的x轴格式化从字符串格式改为函数形式：

tooltip: {
    y: {
        formatter: (value: number) => {
            if (typeof value !== "number") return "0h 0m 0s"
            const hours = Math.floor(value / 3600);
            const minutes = Math.floor((value % 3600) / 60);
            const seconds = value % 60;
            return `${hours}h ${minutes}m ${seconds}s`;
        },
    },
    x: {
        // 替换原format为函数
        formatter: (val) => {
            return new Date(val).toLocaleString('zh-CN', { 
                day: '2-digit', 
                month: '2-digit', 
                year: 'numeric', 
                hour: '2-digit', 
                minute: '2-digit' 
            });
        }
    }
},

内容的提问来源于stack exchange，提问作者Fernando Muñoz