javascript - 调整窗口大小时 Highcharts 对齐 HTML

Question

我已将自定义文本添加到图表中。图表是流动的，并会在调整浏览器窗口大小时调整其大小。

有什么方法可以将“受监控系统”和“漏洞”部分设置为正确对齐，以便它们与图表的其余部分一起调整大小？

jsFiddle

function(chart) { // on complete

chart.renderer.html('<div align="center" style="color: #333333; font-size: 36px; font-weight: bold; margin: 0px; padding: 0px;">96</div><div align="center" style="margin: -10px; padding: 0px;">Monitored Systems</div>', 350, 0)
    .css({
        color: '#999999',
        fontSize: '13px'

    })
    .add(); 



    chart.renderer.html('<div align="center" style="color: #333333; font-size: 36px; font-weight: bold; margin: 0px; padding: 0px;">6</div><div align="center" style="margin: -10px; padding: 0px;"><i class="fa fa-warning" title="Warning"></i> Vulnerabilities</div>', 515, 0)
    .css({
        color: '#999999',
        fontSize: '13px'

    })
    .add(); 
})

Answer 1

您需要移动 html 元素 chart.events.redraw .您可以根据 chart.plotLeft 和 chart.plotWidth 计算它们的新位置。

chart: {
renderTo: 'cont_monitor',
marginTop: 50,
backgroundColor: 'transparent',
events: {
  redraw: function() {
    var elements = this.HTMLElements,
        offsetWidth = 0,
        i = elements.length;

    while (--i > -1) {
      offsetWidth += elements[i].getBBox().width + 75;
   //  offsetWidth += 235;
      elements[i].attr({
        x: this.plotLeft + this.plotWidth - offsetWidth
      });
    }
  }
}
},

示例:https://jsfiddle.net/cdmv0cys/