解决JS Flot绘图报错：G_vmlCanvasManager未定义与饼图标签显示异常

Flot绘图常见报错与解决方案

在使用Flot库进行图形绘制时，今天遇到了几个具体问题。

首先遇到的报错信息如下。

网页错误详细信息 用户代理: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; QQDownload 721; InfoPath.2) 时间戳: Fri, 8 Jun 2012 04:59:50 UTC 消息: 'window.G_vmlCanvasManager' 为空或不是对象 行: 698 字符: 17 代码: 0 URI: http://localhost:8080/chart/jquery.flot.js

解决G_vmlCanvasManager未定义错误

虽然不清楚'window.G_vmlCanvasManager'的具体含义，但经查询得知，该报错是因为未导入必要的兼容脚本所致。

<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->

此前曾提及，不同浏览器采用的绘图机制存在差异，Flot插件正是根据浏览器类型调用不同的绘图方式，其原理类似于Hibernate框架。

修复饼图内部标签绘制失败问题

随后又出现了另一个报错。

Could not draw pie with labels contained inside canvas

代码看似正确却报错，这确实令人困惑。查阅Demo后发现，绘图所在的DIV必须引入特定的CSS样式。若未引入该样式，由于DIV尺寸不确定，导致无法正确进行绘图。

因此，需要为绘图容器增加相应的样式定义。

<style type="text/css"> 
* { 
 font-family: sans-serif; 
} 
 
body 
{ 
  padding: 0 1em 1em 1em; 
} 
 
div.graph 
{ 
  width: 400px; 
  height: 300px; 
  float: left; 
  border: 1px dashed gainsboro; 
} 
</style> 

接着处理DIV的结构。

<div id="graph1" class="graph"></div>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。