highcharts 如何避免X时间轴标签重复

rxztt3cl 于 2022-11-24 发布在 Highcharts

关注(0)|答案(4)|浏览(262)

我正在使用Highstock创建折线图。但是，我发现一个问题，当日期范围小于特定天数时，会出现重复的x标签。我将格式化程序设置为只显示天数。示例如下：http://jsfiddle.net/ry4DQ/

labels: {
    formatter: function() {
          return Highcharts.dateFormat('%m/%d', this.value);
    }
}

例如，当我将开始日期更改为2011-05-07时，您将在x轴上看到每天的两个标签。

有没有办法避免这个问题？
我尝试了setExtremes事件，当日期范围小于某个值时，将tickInterval设置为1天，它工作正常。但是，当图表的大小调整得更小时，标签文本会重叠。
任何帮助或信息是高度赞赏！

highcharts

来源：https://stackoverflow.com/questions/17609473/how-to-avoid-duplicate-x-time-axis-labels

4条答案

按热度按时间

x8goxv8g1#

标签重复，因为您将每个极值的标签定义为%m/%d。即，当您具有以下条件时：18：00 / 22：00（日期范围为2011-05-07），则格式化程序（%m%d）会重叠这些值。因此，结果是重复的。
tickInterval / minrange应定义为以毫秒为单位的时间，因此一天为24 * 3600 * 1000。

赞(0）回复(0）举报 2022-11-24

kzipqqlq2#

如果您从xAsis.labels中删除了formatter，这个问题就会消失。但是您可能不喜欢这个日期格式。下面是the fiddle和屏幕截图：

赞(0）回复(0）举报 2022-11-24

brjng4g33#

@sebastian-bochan的解决方案引导我走上了正确的道路：你仍然可以使用你的格式化程序（与@dan-dascalescu的答案相反），只是确保也将间隔设置为正确的毫秒数！

if hour_axis == true
  date = 'h:MMTT'
  interval = 3600 * 1000
else
  date = 'm/d/yy'
  interval = 24 * 3600 * 1000

xAxis =
  xAxis:
     tickInterval: interval
     tickPositions: 0
     type: 'datetime'
     labels:
     formatter: ->
        dateFormat(@value, date)

赞(0）回复(0）举报 2022-11-24

7uzetpgm4#

这对我很有效：

xAxis: {
                type: 'datetime',
                tickPositions: 0,
                tickInterval:  24 * 3600 * 1000,
                tickPixelInterval: 110,
                maxTickPixelInterval: 125,
                minTickInterval: 100,
                labels: {
                    format: '{value:%m/%d/%y}',
                    enabled: true
                }
            },

赞(0）回复(0）举报 2022-11-24

我来回答

highcharts 如何避免X时间轴标签重复

4条答案

相关问题

热门标签

最新问答