javascript - 显示完整日期而不仅仅是 hh :ss in LightningChart JS? 的方法

Question

上面的屏幕截图显示了缩小版本，其中日期显示为完整格式，但放大时只显示 hh:ss 格式的时间。第二张截图显示了放大版本 有没有办法在放大版本中显示图例的完整日期？请帮忙

Answer 1

LightningChart JS v3.4.0 更新

LightningChart JS v3.4.0 为 DateTimeTickStrategy 提供了更多选项轴格式。现在可以为刻度的每个“级别”设置不同的格式。

const formatting = {year: 'numeric', month: 'long', day: 'numeric', hour: 'numeric', minute: 'numeric'}

chart.getDefaultAxisX().setTickStrategy(AxisTickStrategies.DateTime, (styler)=>
    styler.setDateOrigin(dateOrigin)
        .setFormattingDay(formatting, formatting, formatting)
        .setFormattingDecade(formatting, formatting, formatting)
        .setFormattingHour(formatting, formatting, formatting)
        .setFormattingMilliSecond(formatting, formatting, formatting)
        .setFormattingMinute(formatting, formatting, formatting)
        .setFormattingMonth(formatting, formatting, formatting)
        .setFormattingSecond(formatting, formatting, formatting)
        .setFormattingWeek(formatting, formatting, formatting)
        .setFormattingYear(formatting, formatting, formatting)
)

---

旧版 LightningChart JS v1.3.1 答案

当 DateTime AxisTickStrategy 已创建，您可以通过 AxisTickStrategies.DateTime() 调用中的第三个参数为其提供格式化选项。第三个参数需要一个 Intl.DateTimeFormat。要提供给它的选项对象。

遵循 Intl.DateTimeFormat.options 对象属性的文档。我们可以让日期和时间始终可见

lightningChart().ChartXY({
    defaultAxisXTickStrategy: AxisTickStrategies.DateTime(
        undefined, 
        undefined,
        {
            year: 'numeric',
            month: 'long',
            day: 'numeric',
            hour: 'numeric',
            minute: 'numeric'
        }
    )
})

如果你想为它们使用默认值，你可以将 undefined 传递给第一个和第二个参数。

这样我们就可以得到类似于以下屏幕截图的结果:

这样做时，放大时格式不会改变，它会始终保持不变。可以按照 Intl.DateTimeFormat.options 属性文档进一步自定义格式。