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

Posted 2023-05-07

【中文标题】如何格式化 nivo 行中 x 轴的值？

【英文标题】：How can I format my values for the x-axis in nivo line?

【发布时间】：2020-08-05 16:50:42

【问题描述】：

我正在为图表使用@nivo/line react 库。现在我有：

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'。无需更改任何其他区域格式。更改多个会导致错误。 现在我需要在其中创建一个新行。

【参考方案1】：

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

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

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

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