时间戳

首页 > 解决方案 > Plotly 刻度格式 - 毫秒到 HH:MM

time - Plotly 刻度格式 - 毫秒到 HH:MM

问题描述

我有下面的 PlotlyJS 图表，它是用下面的代码制作的。我有一个函数可以遍历按时间顺序排列的事件列表（在本例中是日出、日落和暮光之城）。它创建子列表，这些列表是特定日期的每个事件的开始和持续时间（以毫秒为单位）。目前 x 轴显示毫秒，并且迹线显示正确。

我的问题是如何格式化刻度标签，使它们不是数百万而是 HH:MM 格式？

我在 Plotly 网站上查看了有关刻度格式的信息，但似乎没有什么适合我的需要！

示例图表

每个跟踪都使用以下内容构建：

          var trace =  {x: [duration],
                        base: start,
                        y: [startDate.format('DD-MM-YY')],
                        orientation: 'h',
                        marker: { color: solarEventColors[sunStatus[i+1]], width: 1},
                        type: 'bar',
                        opacity: 0.5,
                        }
          dataArray.push(trace)

PlotlyJS 图表使用的布局是：

var layoutSunChart = {title: 'Solar Events by Time',
                        barmode: 'relative',
                        bargroupgap: 0.4,
                        yaxis: {type: 'category',
                        autorange: "reversed",
                                fixedrange: true, 
                                showgrid : false,
                                automargin: true,
                                    },
                        xaxis : {

                           tickmode: "linear",
                                tick0: 0,
                                dtick: 8640000, // milliseconds
                                fixedrange: true, 
                                zeroline : false, 
                                showgrid : false,
                                automargin: true,
                                title: 'Time (hh:mm)'
                            },
                        autosize: true,
                        showlegend: false,
                        paper_bgcolor: '#E9ECEF',
                        plot_bgcolor:'rgba(0,0,0,0)',
                        //hovermode: 'closest',
                        staticPlot: true,
                        }

标签： timeaxis-labelsmillisecondsplotly.js

解决方案

我猜你弄错了x轴和y轴。但如果我做对了，你想显示毫秒吗？因此，您需要使用以下两种刻度格式之一：

tickformat: '%d/%m/%Y %H:%M:%S.%f, 只显示有意义的数字（如果没有给出毫秒，至少 .0）

或者

tickformat: '%d/%m/%Y %H:%M:%S.%L', 显示所有毫秒（甚至 0.000）

但是如果你想显示所有的数字，你可以把.f它放在 tickformat 中。像这样的东西：

tickformat: '.3f'

例如，这样，您将显示 3 个小数位。

推荐阅读