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

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

在没有看到屏幕截图的情况下，很难判断这是否是您遇到的确切问题，但如果您的问题正是我所认为的，那么这里是解决方案：

尝试设置 minPadding 和 相关轴的 maxPadding 为 0，以及 startOnTick: true 和 endOnTick: true。如果您不设置填充，则可能会覆盖 startOnTick 和 endOnTick 的行为。

Answer 2

我认为你的问题是日期时间标签的自动调整。
Highcharts 将获取某个点的日期并根据其自身的逻辑设置轴标签。

例如，如果您的轴跨越几年，它可能会显示 2012 年 8 月甚至仅显示年份。
因此，您所看到的将日期 01.Aug 2012 分配给现实中的轴，Highcharts 正在显示适合轴刻度的日期表示形式。

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

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

参见 HighCharts 参考

所以您所要做的就是更改this:

{
    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 问题，更详细一些