Question

我正在使用lazy_high_charts ruby gem在highcharts图表上工作。 x轴表示连续日期，每隔三个标记一次。但是，我似乎无法控制标签出现的日期，并且随之无法控制网格线的显示位置。无论图表的开始或结束日期是什么，它似乎都“锁定”为某些日期分配刻度线，我无法找到改变它的方法。

这有另一个烦人的副作用，因为我使用startOnTick和endOnTick设置为true：有时数据系列行显示为与图表的左侧齐平（在这种情况下，与网格线/刻度/标签对齐）），有时它们从最左边的值开始。

我已经尝试了所有我能想到的并且没有找到使事情看起来美观和一致的解决方案。我想要的是在图表的左侧和右侧有网格线/刻度/标签，第一个标签与第一个数据点对齐，无论发生在哪一天。

（编辑：遗憾的是，我无法发布以下截图，因为我是新用户...如果我设法获得10个重复点，我会上传它们）以下是显示两个日期范围的屏幕截图，其中说明了两种情况：

正如您所看到的，在两种情况下，标签/刻度/网格线都落在完全相同的日期，即使时间范围不同。（编辑：见上文）

以下是我正在使用的图表选项。抱歉他们使用ruby语法，但是他们直接翻译成javascript。除了这个问题，图表正如我想要的那样出现，所以我不想做任何会影响外观任何部分的更改。谢谢！

f.options[:title] = nil

  f.options[:legend] = { :enabled => false }

  f.options[:chart] = {
    :defaultSeriesType => "line",
    :height => 342,
    :width => 760,
    :opacity => 0.0,
    :style => "{ width: 760px; height: 342px; }",
    :borderColor => '#000000',
    :plotBorderColor => '#000000',
    :labels => "{ color: '#000000'; }",
    :spacingLeft => 25,
    :spacingRight => 25,
  }

  f.options[:xAxis] = {
    :type => 'linear',
    :gridLineWidth => 1,
    :gridLineDashStyle => 'ShortDash',
    :startOnTick => true,
    :endOnTick => true,
    :showLastLabel => true,
    :tickInterval => 3.days * 1000,
    :tickLength => 10,
    :tickWidth => 1,
    :tickPosition => 'inside',
    :tickmarkPlacement => 'on',
    :minorGridLineWidth => 0,
    :minorGridLineDashStyle => 'Dot',
    :minorTickInterval => 1.day * 1000,
    :minorTickLength => 5,
    :minorTickWidth => 1,
    :offset => 15,
    :minorTickPosition => 'inside',
    :lineWidth => 0,
    :labels => { :align => 'center', :step => 1 },
    :min => "2012-01-09".to_datetime.to_i * 1000,
    :max => "2012-01-09".to_datetime.to_i * 1000 + 29.days * 1000,
  }

  f.options[:yAxis] = {
    :title => { :text => nil },
    :type => 'linear',
    :gridLineWidth => 0,
    :min => 0,
    :max => 100,
    :labels => { :enabled => false }
  }
  f.series(:name=>'SeriesA', :data=>[29.9, 71.5, 54.4, 98, 2, 14.0, 23.6, 65.5, 34.4, 88.1], :color => "#D846AD", :pointStart => "2012-01-09".to_datetime.to_i * 1000, :pointInterval => 3.days * 1000)
  f.series(:name=>'SeriesB', :data=> [40.9, 71.5, 32.4, 12.2, 12.0, 32.0, 43.6, 34.5, 56.4, 87.1], :color => "#0A96C9", :pointStart => "2012-01-09".to_datetime.to_i * 1000, :pointInterval => 3.days * 1000)

Answer 1

我认为您的问题是自动调整日期时间标签。 Highcharts将采用一个点的日期并根据自己的逻辑设置轴标签。

例如，如果您的轴跨越几年，它可能会显示在2012年8月甚至只是一年。所以你看到将日期01.Aug 2012分配给轴实际上Highcharts显示了一个适合轴刻度的日期表示。

您可以通过为xAxis设置DateTimeLabelFormat来控制此行为：

dateTimeLabelFormats：Object对于日期时间轴，比例将为自动调整到适当的单位。这个成员给了每个单元使用的默认字符串表示形式。概述替换代码，请参阅dateFormat。默认为：

请参阅HighCharts Reference

所以你要做的就是改变这个：

{
    second: '%H:%M:%S',
    minute: '%H:%M',
    hour: '%H:%M',
    day: '%e. %b',
    week: '%e. %b',
    month: '%b \'%y',
    year: '%Y'
}

类似

{
    second: '%H:%M:%S',
    minute: '%H:%M',
    hour: '%H:%M',
    day: '%e. %b',
    week: '%e. %b',
    month: '%e. %b',
    year: '%e. %b %Y'
}

让它显示：

％e：每月的日期，1到31。和％b：短月，如'Jan'。

因此，举例来说，它将显示23. Jan为您的轴刻度为一天或更高，以及23. Jan 2012为一年一年的规模。

另一种方法是强制图表显示您的值。我不认为这在日期时间折线图中是可取的，但这是一个例子： JSFiddle

这里的StackOverflow question有更多细节

Answer 2

很难说这是你没有看到截图的确切问题，但如果你的问题是我认为的问题，那么这就是解决方案：

尝试将相关轴的minPadding和maxPadding设置为0以及startOnTick: true和endOnTick: true。据推测，如果您还没有设置填充，则会覆盖startOnTick和endOnTick的行为。

如何强制Highcharts datetime X轴上的刻度线/网格线任意与数据点对齐？

2 个答案: