如何格式化 nivo 线中 x 轴的值？

Question

我正在使用 @nivo/line 反应库来绘制图表。现在我有：

xScale={{
                        type: 'time',
                        format: '%m/%d/%Y %H:%M:%S %p',
                        precision: 'second',
                    }}
                    xFormat="time:%Y-%m-%d"
  axisBottom={{
                        orient: 'bottom',
                        tickSize: 0,
                        tickPadding: 10,
                        tickRotation: 0,
                        tickValues: 'every 5 hours',
                        format: '%m/%d/%Y %H:%M:%S %p',
                        legendOffset: 100,
                        translateX: 25,
                        legendPosition: 'start',
                    }}

我想完全删除秒视图。文档在这里： https: //nivo.rocks/guides/axes#ticks，但我正在寻找更具体的内容或示例。我知道我可以从数据中删除毫秒，但我想知道我是否可以在不这样做的情况下进行格式化。有人有更多特别是格式化方面的信息吗？谢谢

---

我能够将其格式化为：格式：'%m/%d/%Y %H:%M %p'。无需更改任何其他区域的格式。更改多个会导致错误。现在我需要在其中创建一个新行。

Answer 1

您是否尝试过使用格式属性的函数？您可以使用它以任何您想要的方式转换值。

我喜欢数据中的日期是 Unix 时间戳。这有助于我保持灵活地跨组件以不同方式显示它们。下面的示例使用 Moment.js 库来帮助进行日期格式化，但它实际上适用于任何东西。

<ResponsiveLine
    axisBottom={{
        format: function(value){ 
            return moment.unix(value).format('MMMM Do YYYY, h:mm');
        }
    }}
    // other props
/>

如果您提供一个最小的工作示例（例如 codepen 或 jsfiddle），将会有所帮助，因为解决方案取决于数据的结构。这将使您更轻松、更有趣地找到适合您的具体案例的解决方案:-)