Question

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

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

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/

当窗口调整大小时，Highcharts将HTML右对齐

1 个答案: