如何向我的 highchart/highstock 图表的绘图区域添加内部填充？答案

【问题标题】：How can I add internal padding to the plot area of my highchart/highstock chart?如何向我的 highchart/highstock 图表的绘图区域添加内部填充？
【发布时间】：2018-10-10 17:34:46
【问题描述】：

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

 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

【问题讨论】：

标签： javascript highcharts

【解决方案1】：

您不需要设置 chart.marginRight 属性，因为（如您现在所见，您可以在文档中阅读）它会在图表边缘和绘图区域之间产生一个空闲空间，这就是导航器的原因与其他图表元素一样。

为了达到你需要的效果，只要将所有边距设置为0，然后设置width属性等于e.g. 95% 在每个 yAxis 和 xAxis（在本例中为三个轴）上。它应该为您提供所需的结果。

  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/

【讨论】：

谢谢！