X轴不以高位图中的列系列为中心(jsFiddle)

时间:2014-01-23 17:05:16

标签: javascript highcharts highstock

栈,

由于某些原因,当图表是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 } ] }); });

2 个答案:

答案 0 :(得分:2)

第一次来,

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

如果您想使用本地时间调整高级字幕global option

Highcharts.setOptions({
    global: {
        useUTC: false
    }
});

使用此选项的新fiddle

答案 1 :(得分:0)

设置pointRange参数和tickInterval

其他解决方案是使用categories