代码之家 › 专栏 › 技术社区 › Jonathan002

如何将内部填充添加到highchart/highstock图表的绘图区域?

highcharts javascript

Jonathan002 · 技术社区 · 6 年前

我有一个图表,需要适合端到端的触摸屏。我已经能够做到这一点,减少左边和右边的图表边缘,以适应它的容器。

 chart: {
    marginTop: 0,
    marginBottom: 0,
    marginLeft: 0,
    marginRight: 0,
 }

我还想在yAxis标签和plot数据之间保留一个空格或填充,因此我使用了yAxis标签的x值来防止数据重叠。然后我添加了marginRight以使其可见:

 chart: {
    marginRight: 45,
 }
 yAxis: {
    labels: {
      align: 'right',
      x: 30
    },
 }

问题是这会迫使导航器收缩。

如何获得图表:

使用yAxis打印区域填充(防止打印点与yAxis标签重叠)
并保留导航器宽度以获得容器的全宽?

jsFiddle to showcase the example

1 回复 | 直到 6 年前

daniel_s 6 年前

你不需要设置 chart.marginRight 属性,因为(正如您现在看到的,并且您可以在文档中阅读)它在图表边缘和绘图区域之间生成一个可用空间,所以这就是为什么导航器也具有与其他图表元素相同的属性。

0 ,然后设置 width 性质等于,例如。 95%

  chart: {
     margin: 0
  },
  yAxis: [{
    labels: {
      align: 'right',
      x: 30
    },
    height: '60%',
    lineWidth: 2,
    resize: {
      enabled: true
    },
    width: '95%'
  }, {
    labels: {
      align: 'right',
      x: 30
    },
    top: '65%',
    height: '35%',
    width: '95%',
    offset: 0,
    lineWidth: 2
  }],
  xAxis: {
    width: '95%'
  },

https://jsfiddle.net/5zxodeb0/