动态更改高图中x轴刻度标签的日期时间格式

Dynamically change datetime format of xAxis Tick Label in highchart

本文关键字：标签 日期 时间 格式 高图中 动态      更新时间：2023-09-26

我需要根据用户的选择在 MM/dd/yyyy HH:mm:ss 和 MM/dd/yyyy 之间更改 X 轴刻度标签的日期时间格式。
如何使用javascript来实现这一点？

得到了解决方案，只是使用以下代码（ASP.NET）使tickInterval动态化

tickInterval : <%=IsHourly?1:24 %> * 3600 * 1000,

使用相同的逻辑更改工具提示。

xAxis : {
            type : 'datetime',
            gridLineWidth : 1,
            gridLineColor : '#F2F2F2',
            lineColor : '#FF0000',
            tickInterval : 3600 * 1000,
            dateTimeLabelFormats : {
                second : '%H:%M',
                minute : '%H:%M',
                hour : '%H:%M',
                day : '%e',
                week : '%e',
                month : '%e',
                year : '%e'
            }
        },

请参阅日期时间标签格式选项，您可以使用它来更改 x 轴刻度标签。

如果您需要更清楚，请告诉我。！

编辑：

更多API参考可以在Highcharts的网站上找到。

演示

编辑2：好的，所以如果您需要动态更改它首先根据任何计算将您需要的格式保存为String，例如
var labelFormat = '%H:%M'等。
然后在渲染图表时，dateTimeLabelFormats放置如下其他必需的选项。

dateTimeLabelFormats : { labelFormat }

然后调用redraw()方法，你就完成了。

请注意：我还没有测试过这段代码。

我知道

我为时已晚，但如果您正在寻找纯JavaScript实现，这可能会起作用：

tooltip:{formatter:function(){
            const selectedFormat = document.getElementById("dateFormat").value;
            const finalDate = Highcharts.dateFormat(selectedFormat, this.x);
            return finalDate;
        }
}

http://jsfiddle.net/527moaLs/

我想你可以自己找到其余的解决方案

相关文章：