Highcharts boundingbox issue with env.js

问题:

In the new feature article on Highcharts for the serverside using Export Server and PhantomJS, issues related to bounding box in Env.js (used with Rhino) is mentioned. Could you please post an example where the chart is rendered incorrectly due to the bounding box for SVG issue? Is there any specific pattern in which it could happen?

回答1:

Highcharts calculates the bounding boxes of for example labeltext. This is to prevent collision/overlapping of labeltext. You can test the breakdown of this functionality in env.js yourself by experimenting with a combination of small width chart and a very long serie name. I guess you have to comeup with your own test scenarios and see if env.js fits your needs.

回答2:

I had Problems with the automatic positioning of X-Axis labels. Positioning of rotated Text would be a good place to start. To give you an example what would not work - here is the function I found for simulating the getBBox() functionality:

 ep = Element.prototype;

 ep.getBBox = function() {
 var w = 10;
 if (ep.tagName == "TEXT" && ep.firstChild) {
   var s = ep.firstChild.innerHTML;
   w = s.length * 5;
 }

 return {
   x : ep.offsetLeft ? ep.offsetLeft : 0,
   y : ep.offsetTop ? ep.offsetTop : 0,
   width : w,
   height : 16
 };
};

As you see it is pretty barebones - just approximates Textlength and returns a default width and height otherwise.