时间戳

首页 > 解决方案 > 如何在 React Highchart 的工具提示中删除小数点时间

reactjs - 如何在 React Highchart 的工具提示中删除小数点时间

问题描述

我有一个面积图，在工具提示中显示一些值和日期时间，如下图所示：

这是我使用的选项：

const getConfig = data => ({
    chart: {
        type: 'area'
    },
    rangeSelector: {    
        selected: 1
    },
    title: {
        text: 'Highcharts',
    },
    xAxis: {
        tickInterval: 1000,
    },
    yAxis: {
        allowDecimals: false,
        labels: {
            format: '{value}'
        }
    },
    tooltip: {
        pointFormat: "{point.y:.0f}"
    },
    series: [
        {
            name: 'Data',
            data: data,
        },
    ],
});

我已经尝试过这个自定义的 highcharts 工具提示来显示日期时间，使用以下代码：

tooltip: {
    formatter: function() {
        return  '<b>' + this.series.name +'</b><br/>' +
            Highcharts.dateFormat('%e - %b - %Y',
                                  new Date(this.x))
        + ' date, ' + this.y + ' Kg.';
    }
}

但仍然没有更改下部工具提示（日期时间），它只是更改上部工具提示（122 值）。

如何在工具提示中删除十进制值，这样时间就像Sunday, Jul 29, 15:50:14？

标签： reactjshighcharts

解决方案

使用dateTimeLabelFormats：

tooltip: {
  dateTimeLabelFormats: {
    millisecond: "%A, %b %e, %H:%M:%S"
  }
}

现场演示：http: //jsfiddle.net/BlackLabel/nbgzkwj3/

API：https ://api.highcharts.com/highcharts/tooltip.dateTimeLabelFormats.millisecond

推荐阅读