Highcharts - 我如何将标签集中在日期时间x轴上？ [英] Highcharts - how can I center labels on a datetime x-axis?

问题描述

我很难找出如何在Highcharts中的日期时间x轴上标记标签而不使用类别和tickPlacement（因为tickPlacement只适用于类别）。

My axis是动态创建的，所以我不能简单地设置一个x-offset或者padding，因为这会导致不同间隔的轴看起来很奇怪。

After搞乱配置选项我想我可能已经找到了一个解决方案，使用x轴格式化程序和一些在Highcharts回调中使用的css / jquery。请参阅下面的答案。

解决方案

诀窍是使用x轴标签对象，如下所示：

  xAxis：{
类型：'datetime'，
标签：{
 useHTML：true，
 align：'center'，
 formatter：function（）{
 //为标签使用特定的类有助于确保没有其他标签被移动
 return'< span class =timeline_label >'+ Highcharts.dateFormat（this.dateTimeLabelFormat，this.value）+'< / span>'; 
 
 
 
 
 
 
 $ b 
你可以看到格式化程序会保存任何的dateTimeLabelFormat已经由用户或默认设置。
 
 
 
然后有一个类似这样的回调： 
 
 
 函数（图表）{
 var $ container = $（chart.container）; 
 var $ labels = $ container.find（'。highcharts-axis-labels .timeline_label'）; 
 var $ thisLabel，$ nextLabel，thisXPos，nextXPos，delta，newXPos; 
 $ b $ label.each（function（）{
 $ thisLabel = $（this）.parent（'span'）; 
 thisXPos = parseInt（$ thisLabel.css（'左'））; 
 
 $ nextLabel = $ thisLabel.next（）; 
 nextXPos = $ nextLabel.length？parseInt（$ nextLabel.css（'left'））：chart.axes [0] .left + chart.axes [0] .width; 
 delta =（nextXPos  -  thisXPos）/ 2.0; 
 newXPos = thisXPos + delta; 
 
 if（$ nextLabel.length || $（this）.width（）+ newXPos< nextXPos）{
 $ thisLabel.css（'left'，newXPos +'px'）; 
} else {
 $ thisLabel.remove（）; 
} 
}）; 
}）; 
  
总之，这将通过每个标签并确定它应该移动多少（使用css ）通过计算它自身和下一个标签之间的距离。当它到达最后一个标签时，它会使用轴的末端移动它进行计算，或者如果它不合适，则将其移除。这最后一部分只是我决定做出的决定，你可以选择做一些其他的事情，比如自动换行等等。
 
 
 
你可以看到 jsfiddle here  
 
 
 
希望这有助于一些人。此外，如果有任何改进，在这里看到它们会很棒。
 
I was having a hard time trying to figure out how to center labels on a datetime x-axis in Highcharts without using categories and tickPlacement (since tickPlacement only works on categories).

My axis was dynamically created so I could not simply set an x-offset or padding, as this would cause axes of different intervals to look strange.

After messing around with the config options I think I may have found a solution using the x-axis formatter and some css / jquery noodling in the Highcharts callback. See my answer below.
解决方案
The trick is to use the x-axis labels object like this:
xAxis: {
  type: 'datetime',
  labels: {
    useHTML: true,
    align: 'center',
    formatter: function () {
      //using a specific class for the labels helps to ensure no other labels are moved 
      return '<span class="timeline_label">' + Highcharts.dateFormat(this.dateTimeLabelFormat, this.value) + '</span>';
    }
}
You can see that the formatter will keep whatever dateTimeLabelFormat has been set by the user or default.

Then have a callback that does something like this:
function (chart) {
  var $container = $(chart.container);
  var $labels = $container.find('.highcharts-axis-labels .timeline_label');
  var $thisLabel, $nextLabel, thisXPos, nextXPos, delta, newXPos;

  $labels.each(function () {
    $thisLabel = $(this).parent('span');
    thisXPos = parseInt($thisLabel.css('left'));

    $nextLabel = $thisLabel.next();
    nextXPos = $nextLabel.length ? parseInt($nextLabel.css('left')) : chart.axes[0].left + chart.axes[0].width;
    delta = (nextXPos - thisXPos) / 2.0;
    newXPos = thisXPos + delta;

    if ($nextLabel.length || $(this).width() + newXPos < nextXPos) {
      $thisLabel.css('left', newXPos + 'px');
    } else {
      $thisLabel.remove();
    }
  });
});
In short, this will go through each label and determine how much it should be moved over (using css) by calculating the distance between itself and the next label. When it reaches the the last label, it either moves it over using the end of the axis for the calculation or removes it if it won't fit. This last part is just the decision I decided to make, you can probably choose to do something else like word wrap, etc.

You can see the jsfiddle here

Hope this helps some people. Also, if there are any improvements it would be great to see them here.

                        
这篇关于Highcharts  - 我如何将标签集中在日期时间x轴上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！