如何在内部图表/高库存图表的绘图区域添加内部填充？

Question

我有一张图表需要适合触摸屏的端到端。通过减少图表左侧和右侧的边距以适合其容器，我能够做到这一点。

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

我还想在yAxis标签和绘图数据之间保留空格或填充，因此我使用yAxis标签的x值来尝试防止数据重叠。然后，我添加marginRight使其可见：

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

问题在于，这迫使导航器缩小。

如何获取图表：

• 停留在包含div的一端
• 使用yAxis绘图区域填充（以防止绘图点与yAxis标签重叠）
• 并保留导航器的宽度以具有容器的整个宽度？

jsFiddle to showcase the example

Answer 1

您不需要设置chart.marginRight属性，因为（如您现在所看到的，并且您可以在文档中阅读）它会在图表边缘和绘图区域之间产生一个自由空间，所以这就是为什么导航器也具有与其他图表元素相同的功能。

为了获得所需的效果，只需将所有边距设置为0，然后将width属性设置为例如每个yAxis和xAxis（在本例中为三个轴）上的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/