X轴刻度不在高图中的列系列居中(jsFiddle) [英] X axis tick not centering on column series in highcharts (jsFiddle)

问题描述

堆栈

由于某种原因，当图表为DateTime类型图表时，highcharts似乎不想将x轴刻度放置在堆叠柱形图的下方.

您可以在此jsFiddle中看到( http://jsfiddle.net/4Mngx/2/，并且您还可以看到具有空填充数据的这一点指向 http://jsfiddle.net/4Mngx/1/)，x轴刻度线在每列的左侧交错.

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

解决方案

第一次来

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

我假设它不是本地时间，而highcharts会将标签移动了5个小时.如果您将时间偏移为16 Jan 2014 00:00:00 GMT，则标签将居中.

更新了小提琴.

OR

如果您要使用本地时间调整高点图表，请全局选项.

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

使用此选项的新小提琴.

Stack,

For some reason highcharts seems to not want to place x axis ticks centered underneath stacked column charts when the chart is a DateTime type chart.

As you can see in this jsFiddle (http://jsfiddle.net/4Mngx/2/ and you can also look that this one with null stuffed data points http://jsfiddle.net/4Mngx/1/), the x axis tick marks are staggered to the left of each column.

Removing the "stacked" property of the columns seems to resolve the issue, but the columns have to be stacked in order to have the appropriate thickness, otherwise the columns are made thin in order to fit all the series into each tick mark even though only one series actually has real data per tick mark.

$(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
    }
  ]
});
});

解决方案

Taking your first time,

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

I'm assuming it's localtime not GMT and highcharts is shifting the label 5 hours. If you shift your time do it's 16 Jan 2014 00:00:00 GMT, the label will be centered.

Updated fiddle.

OR

If you want to use local time adjust highcharts global option.

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

New fiddle with this option.

这篇关于X轴刻度不在高图中的列系列居中(jsFiddle)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！