javascript - 如何向 highchart/highstock 图表的绘图区域添加内部填充？

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/