如何在highchart中将标题html div与图表水平对齐？

Question

考虑以下jsfiddle

我正在尝试调整标题bottom-border和图表之间的差距。 优选地，图表的左侧和右侧分别与标题边框的左侧和右侧对齐。

无论如何，我可以不用硬编码就能做到这一点（我的图表宽度相对于屏幕大小发生变化）吗？

Answer 1

您可以强制标题具有与绘图区域相同的宽度和左偏移。 为了确保它是响应式的，请使用render事件：

chart: {
  plotBorderWidth: 1,
  events: {
    render: function() {
      var style = this.title.element.style;
      style.left = this.plotLeft + 'px';
      style.width = this.plotWidth + 'px';
    }
  }
}

现场工作演示： http ： //jsfiddle.net/kkulig/y3fj6vpq/

API参考： https ： //api.highcharts.com/highcharts/chart.events.render

Answer 2

更改标题的这两个属性。

left: 77px;
width: 922px;