X 轴刻度不以高图表中的列系列为中心（jsFiddle）

Posted 2023-03-14

【中文标题】X 轴刻度不以高图表中的列系列为中心（jsFiddle）

【英文标题】：X axis tick not centering on column series in highcharts (jsFiddle)

【发布时间】：2014-01-23 17:05:15

【问题描述】：

堆栈，

由于某种原因，当图表是 DateTime 类型图表时，highcharts 似乎不想将 x 轴刻度置于堆叠柱形图下方居中。

正如您在这个 jsFiddle（http://jsfiddle.net/4Mngx/2/ 中看到的，您还可以看到这个带有空填充数据点的那个 http://jsfiddle.net/4Mngx/1/），x 轴刻度线在每列的左侧交错排列。

删除列的“堆叠”属性似乎可以解决问题，但是必须将列堆叠以具有适当的厚度，否则列会变薄以使所有系列适合每个刻度线即使只有一个系列实际上每个刻度线都有真实数据。

$(function () 
    $('#container').highcharts(
  "title": 
    "text": "This is a title"
  ,
  "subtitle": 
    "text": "7 Days (01/16/2014 - 01/22/2014)"
  ,
  "xAxis": 
    "type": "datetime",
    "dateTimeLabelFormats": 
      "day": "%b %e"
    
  ,
  "yAxis": 
    "title": 
      "text": "Y axis title"
    ,
    "min": -1,
    "max": 7
  ,
  "plotOptions": 
    "column": 
      "showInLegend": true,
      //"stacking": "stacking"
    
  ,
  "series": [
    
      "name": "Green",
      "color": "#4CB158",
      "borderColor": "#FFFFFF",
      "type": "column",
      "data": [
        
          "x": 1389848400000,
          "y": 2,
        
      ],
      "threshold": -10
    ,
    
      "name": "Yellow",
      "color": "#FFA93C",
      "borderColor": "#FFFFFF",
      "type": "column",
      "data": [
      ],
      "threshold": -10
    ,
    
      "name": "Red",
      "color": "#EA494A",
      "borderColor": "#FFFFFF",
      "type": "column",
      "data": [
        
          "x": 1390280400000,
          "y": 4
        
      ],
      "threshold": -10
    ,
    
      "name": "Grey",
      "color": "#cccccc",
      "borderColor": "#FFFFFF",
      "type": "column",
      "data": [
        
          "x": 1389934800000,
          "y": 0
        ,
        
          "x": 1390021200000,
          "y": 0
        ,
        
          "x": 1390107600000,
          "y": 0
        ,
        
          "x": 1390194000000,
          "y": 0
        ,
        
          "x": 1390366800000,
          "y": 0
        
      ],
      "threshold": -10
    
  ]
);
);

【参考方案1】：

第一次，

GMT: Thu, 16 Jan 2014 05:00:00 GMT
Your time zone: 1/16/2014 12:00:00 AM GMT-5

我假设它是当地时间而不是 GMT，highcharts 正在将标签移动 5 小时。如果你改变你的时间，那就是16 Jan 2014 00:00:00 GMT，标签将居中。

更新fiddle。

或

如果你想使用当地时间调整highchartsglobal option。

Highcharts.setOptions(
    global: 
        useUTC: false
    
);

使用此选项新建fiddle。

【讨论】：

马克，所以 highcharts 在其系统设置中默认为 GMT 还是什么？是的，我正在使用我们的本地系统时间创建 js 时间戳。

@billmalarky，没错而且你甚至可以调整这个设置。请参阅此小提琴：jsfiddle.net/4Mngx/4，可能更适合您的情况。

哇，这很有帮助。我要到星期一才有时间实施这个解决方案，但我认为你已经破解了它。我暂时将您的答案标记为正确，如果仍然无法解决，我会重新打开。

【参考方案2】：

设置pointRange参数和tickInterval

其他解决方案是使用categories。

【讨论】：

好吧，我们之前成功地使用类别而不是日期时间作为 x 轴，但是使用日期格式的类别而不是使用实际的日期时间图表类型感觉就像一个黑客攻击。