场景:使用Highcharts图表导出图片,导出的图片右上角上有一个方块。
原因:对比php导出服务后,没有发现有方块,所以确定不是图表的问题,应该是导出服务的问题。
分析:通过查看Tek4.Highcharts.Exporting服务源码,发现原理是把图表生成svg后,然后解析svg,最后生成图片。所以有问题的地方只有svg的问题。
通过进一步的对生成的svg分析,终于得出了一个确切的结论,那就是svg的属性有问题(标红的地方),对于生成图片是多余的
<g style="padding-bottom: 0px; padding-left: 0px; padding-right: 0px; white-space: nowrap; cursor: default; padding-top: 0px" class="highcharts-tooltip" visibility="hidden"><rect fill="none" width="16" height="32" x="0.5" y="0.5" rx="3" ry="3" fill-opacity="0.85" stroke="black" stroke-opacity="0.05" stroke-width="5" transform="translate(1, 1)"></rect>
......
</g>
Tek4.Highcharts.Exporting.ExportChart.cs
internal static void ProcessExportRequest(HttpContext context)
{
if (context != null &&
context.Request != null &&
context.Response != null &&
context.Request.HttpMethod == "POST")
{
HttpRequest request = context.Request;
// Get HTTP POST form variables, ensuring they are not null.
string filename = request.Form["filename"];
string type = request.Form["type"];
int width = 0;
string svg = request.Form["svg"];
//规避svg中的tooltip属性
XmlDocument doc = new XmlDocument();
doc.LoadXml(svg);
XmlNodeList xnl = doc.GetElementsByTagName("g");
for (int i = 0; i < xnl.Count; i++)
{
XmlNode xn = xnl[i];
XmlElement xe = (XmlElement)xn;
if (xe.GetAttribute("class") == "highcharts-tooltip")
{
xn.ParentNode.RemoveChild(xn);
break;
}
}
svg = doc.OuterXml;
if (filename != null &&
type != null &&
Int32.TryParse(request.Form["width"], out width) &&
svg != null)
{
// Create a new chart export object using form variables.
Exporter export = new Exporter(filename, type, width, svg);
// Write the exported chart to the HTTP Response object.
export.WriteToHttpResponse(context.Response);
// Short-circuit this ASP.NET request and end. Short-circuiting
// prevents other modules from adding/interfering with the output.
HttpContext.Current.ApplicationInstance.CompleteRequest();
context.Response.End();
}
}
}
问题搞定。