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

我正在使用lazy_high_charts红宝石创业板highcharts图表上。 x轴表示连续日期，每三个标签。但是，我似乎无法控制标签出现在哪个日期，并且无法控制网格线出现的位置。无论图表开始或结束的日期是什么，它似乎都“锁定”在将日期分配给特定的日期，我无法找到改变它的方法。如何强制Highcharts datetime 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)

来源

2012-02-09 rexieroo

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

例如，如果您的轴线横跨数年可能会显示2012年8月，甚至只是一年。所以你看作为指定的日期01.Aug 2012年在现实Highcharts轴是什么显示的日期表示它找到适合坐标轴的比例。

您可以通过设置DateTimeLabelFormat您的X轴控制这一行为：

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月为你点一天23 2012年1月或以上和轴的刻度标尺超过一年。

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

而这里StackOverflow question用稍微详细

来源

2012-08-07 10:05:51 david

这是很难说，如果这是确切的问题，你“再有没有看到的截图，但如果你的问题是什么，我想是的，这里是解决方案：

尝试用startOnTick: true和endOnTick: true沿着相关轴线设置minPadding和maxPadding为0。假设您不设置填充，则startOnTick和endOnTick的行为将被覆盖。

来源

2013-04-15 14:43:52 djg9205

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

回答

相关问题