Highcharts xrange图表不遵守日期时间xAxis最小值和最大值 - 显示两侧的空间

时间:2017-07-22 21:30:10

标签: javascript charts highcharts

如何让我的图表尊重我设置的最小和最大xAxis值,而不会在左侧和右侧填充图表?我基本上想要在最小xAxis值的最左边开始图表,并在最右边的max xAxis值处结束,而没有任何额外的填充/边距。

以下是我正在使用的图表选项:

{
  "title": {
    "text": "Zone History"
  },
  "chart": {
    "type": "xrange",
  },
  "xAxis": {
    "type": "datetime",
    "min": 1500678032000,
    "max": 1500684162000,
    "startOnTick": false,
    "tickmarkplacement":"on",
  },
  "yAxis": {
    "title": "",
    "min": 0,
    "max": 0,
    "labels": {
      "enabled": false
    }
  },
  "tooltip": {},
  "credits": {
    "enabled": false
  },
  "plotOptions": {
    "series": {
      "grouping": false
    }
  },
  "noData": {
    "style": {
      "fontSize": "24px",
      "color": "#202030"
    }
  },
  "series": [
    {
      "name": "Zone 5",
      "data": [
        {
          "x": 1500677781000,
          "x2": 1500678032000,
          "y": 0
        }
      ],
      "_colorIndex": 0
    },
    {
      "name": "Zone 6",
      "data": [
        {
          "x": 1500678104000,
          "x2": 1500679562000,
          "y": 0
        },
        {
          "x": 1500682921000,
          "x2": 1500684162000,
          "y": 0
        }
      ],
      "_colorIndex": 1
    },
    {
      "name": "Zone 7",
      "data": [
        {
          "x": 1500679583000,
          "x2": 1500680765000,
          "y": 0
        }
      ],
      "_colorIndex": 2
    }
  ]
}

请参阅上面代码的当前版本所包含的小提琴:http://jsfiddle.net/evgcbtrj/

感谢您的期待!

1 个答案:

答案 0 :(得分:1)

将pointPlacement设置为'on'应该可以帮助您摆脱图表两边不必要的填充。

plotOptions: {
  series: {
     pointPlacement: 'on'
  }
}

API参考:
http://api.highcharts.com/highcharts/plotOptions.series.pointPlacement

例:
http://jsfiddle.net/nnt5t1ho/