reactjs - 无法在 React 顶点图表中将时间戳转换为小时分钟和秒

Question

我正在使用反应顶点图表来创建一个图表，该图表将显示每个代理的平均响应时间。

我已经设法以时间戳格式获得结果，但我无法将其转换为小时、分钟和秒以在 yaxis 中显示，我已经检查了文档文档链接，但他们只提供了日期时间的示例。这是我使用下面的组件得到的结果

import React, { useState } from 'react';
import Chart from 'react-apexcharts';

const AvgResponseTimeChart = (props) => {
    const { prod_data } = props;
    const [ data, setData ] = useState([
        {
            x: 'Agent one',
            y: 1589670005
        },
        {
            x: 'Agent one',
            y: 1589670307
        }
    ]);
    const [ series, setSeries ] = useState([ { data } ]);
    const [ options, setOptions ] = useState({
        chart: {
            type: 'bar',
            height: 350
        },
        plotOptions: {
            bar: {
                horizontal: false,
                columnWidth: '25%',
                endingShape: 'rounded'
            }
        },
        dataLabels: {
            enabled: false
        },
        stroke: {
            show: true,
            width: 2,
            colors: [ 'transparent' ]
        },
        xaxis: {
            type: 'category'
        },
        yaxis: {
            labels: {
                datetimeFormatter: {
                    formatter: function(value, timestamp) {
                        return new Date(timestamp).toLocaleTimeString();
                    }
                }
            }
        },
        fill: {
            opacity: 1
        },
        tooltip: {
            y: {
                formatter: function(value, timestamp) {
                    return new Date(timestamp);
                }
            }
        }
    });
    return (
        <div id="chart">
            <Chart options={options} series={series} type="bar" height={350} />
        </div>
    );
};

export default AvgResponseTimeChart;

我已经搜索了类似的问题但没有成功，如果有人可以帮助我，我将非常感激

标签： reactjstimestampapexcharts

Answer 1

尝试以这种方式在chartOptions中向yaxis添加标签：

labels: {
    show: true,
    formatter: (val) => { return new Date(val); }
}

并删除工具提示。