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

Question

我正在使用 lazy_high_charts ruby​​ gem 制作 highcharts 图表。 x 轴代表连续的日期，每三个日期都有标签。但是，我似乎无法控制标 checkout 现在哪个日期下，并且无法控制网格线出现的位置。无论图表开始或结束的日期如何，它似乎都“锁定”到将刻度分配给特定日期，我想不出改变它的方法。

这还有另一个烦人的副作用，因为我使用的 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 以及 startOnTick: true 和 endOnTick: true 设置为 0 >。如果您不设置填充，则 startOnTick 和 endOnTick 的行为可能会被覆盖。