JS绘图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

'window.G_vmlCanvasManager' 是什么东西我不知道，不过经过查询知道，报错是因为没有导入

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

之前说过，不同浏览器绘图使用的方式是不一样的，插件也只是根据不同浏览器使用不同绘图方式而已，就像Hibernate一样。

然后又报错

Could not draw pie with labels contained inside canvas

感觉写对了为什么不对呢，其实这是个让人纠结的问题，我看了Demo才知道，绘图的DIV需要引入一个样式，如果没有引入该样式，因为DVI大小不确定就没办法进行绘图！

所以你要增加一个样式

<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>

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

赞 (0)

相关推荐

  • JavaScript 绘图代码

    JavaScript绘图 IE4 = ! (navigator.appVersion.charAt(0) ') } function Plot(x,y) { outPlot(x,y,1,1) if(Ox>=0 || Oy>=0) { ShowLine(Ox,Oy,x-Ox,y-Oy) } Ox = x Oy = y } function ShowLine(x,y,w,h) { if(w0) return 1 if(ndy) { temp = dx dx = dy dy = temp key =

  • RequireJS简易绘图程序开发

    RequireJS简易绘图程序开发

    前言 RequireJS的出现让前端代码模块化变得容易,当前端项目越来越大,代码越来越多的时候,模块化代码让项目结构更清晰,不仅在开发时让我们的思路更清晰,而且后期维护起来也更容易.下面是我学习RequireJS后使用RequireJS开发的一款简易绘图程序,运行在浏览器中如下图所示: 如果你对RequireJS还不是很了解,可以看我的RequireJS学习笔记:http://blog.csdn.net/yubo_725/article/details/52913853 开始 这个简易绘图程序的

  • JavaScript基础——使用Canvas绘图

    JavaScript基础——使用Canvas绘图

    最近在学习Canvas画图的方法,最近有时间做了个整理,如下: 1.基本用法 要使用<canvas>元素,必须先设置其width和height属性,指定可以绘图的区域大小,出现在开始后结束标签中的内容是后备信息,如果浏览器不支持<canvas>元素,就会显示这些信息.例如: <canvas id="drawing" width="200" height="200">A Drawing of something&

  • 详解plotly.js 绘图库入门使用教程

    详解plotly.js 绘图库入门使用教程

    本文介绍了plotly.js 绘图库入门使用教程,分享给大家,具体如下: Plotly 缘起 这两天想在前端展现数学函数图像,猜测应该有成熟的 js 库. 于是,简单的进行了尝试. 最后决定使用plotly.js,其他的比如function-plot 看起来也不错,以后有时间再看. Plotly plotly.jsis the open source JavaScript graphing library that powers Plotly. Plotly 可以称之为迄今最优秀的绘图库,没有之

  • 用JavaScript绘图 ——JS2D函数集

    /****************** JS2D函数集 ******************* 作者:neweroica 2003-3-28 CopyRight (C) 2003 在引用或转载时请保留此版权信息,谢谢!!! 本函数集可以单独存成一个js文件:"JS2D.js" ***************************************************/ /************* 画点 ************** x,y 点所在的屏幕坐标(像素) col

  • 纯JavaScript代码实现移动设备绘图解锁

    纯JavaScript代码实现移动设备绘图解锁

    移动手机设备上有一个屏幕解锁的应用相信大家都不陌生,在移动设备上,用户可以通过设置锁定图案作为密码对设备用户界面进行锁定,锁定界面如下图所示. 效果图如下所示 JavaScript Code <script> $("#gesturepwd").GesturePasswd({ backgroundColor:"#2980B9", //背景色 color:"#FFFFFF", //主要的控件颜色 roundRadii:50, //大圆点的

  • jquery.flot.js简单绘制折线图用法示例

    jquery.flot.js简单绘制折线图用法示例

    本文实例讲述了jquery.flot.js简单绘制折线图用法.分享给大家供大家参考,具体如下: 1.完整实例代码: <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <title>折线图</title> <!--[if lte IE 8]> <script language="javascript" type="text/javas

  • 用js绘图

    <object id=DirectDraw classid="CLSID:369303C2-D7AC-11D0-89D5-00A0C90833E6" style="positiion:absolute;top:0;left:0;width:320;height:200" > <param name="line0001" value="绘图指令1"> <param name="line00

  • JS绘图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://loc

  • JS绘图Flot如何实现可选显示曲线图功能

    刚刚做了可以动态去刷新的曲线图,下面再来实现一个可以选择显示那个显示值的曲线图. 首先看一下效果: 下面的多选框,选择以后会触发一个事件,等同与重新绘制了曲线图. 重点是需要的数据的格式,我们来看一下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <

  • JS绘图Flot如何实现动态可刷新曲线图

    刚刚做的是一个静态的曲线图,只要设置数据,就可以直接显示.下面来做一个根据时间间隔根据新数据一直变的曲线绘图示例. 同样,为了兼容不同浏览器,请一定要引入三个JS文件,否则不保证在IE下的运行. 首先来看一下效果! 刷新间隔的实现其实就是定时调用某个函数,这个函数将绘图对象里面的数据更新即可. 我们来看一下代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o

  • 如何利用js读取excel文件并绘制echarts图形

    如何利用js读取excel文件并绘制echarts图形

    目录 1.场景描述 2.需求描述 3.功能实现 4.尾言 1.场景描述 通常来说,前端要拿到excel数据,都是先上传存储数据库,然后再请求后端接口,获取数据. 但有100个产品经理,就会有101个不同的需求. 本文以自己的vue项目为例. 2.需求描述 现有一张excel财务报表,需要根据这张excel表绘制成各种echarts图形,用于年度汇报. 不经过后端,前端独立完成. 3.功能实现 首先,为了将excel数据绘制成echarts图表,前端得拿到excel数据. 这里我们借助js-xls

  • Openlayers实现图形绘制

    本文实例为大家分享了Openlayers实现图形绘制的具体代码,供大家参考,具体内容如下 1.新建一个html页面,引入ol.js文件,然后在body中创建一个div标签.label标签和一个select下拉选项卡: 2.代码实现 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"

  • Android编程绘图操作之弧形绘制方法示例

    Android编程绘图操作之弧形绘制方法示例

    本文实例讲述了Android编程绘图操作之弧形绘制方法.分享给大家供大家参考,具体如下: /** * 绘制弧形图案 * @description: * @author ldm * @date 2016-4-25 下午4:37:01 */ public class ArcsActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedIns

  • Android开发实现各种图形绘制功能示例

    Android开发实现各种图形绘制功能示例

    本文实例讲述了Android开发实现各种图形绘制功能.分享给大家供大家参考,具体如下: 这里结合本人的开发事例,简单介绍一下如何在Android平台下实现各种图形的绘制. 首先自定义一个View类,这个view类里面需要一个Paint对象来控制图形的属性,需要一个Path对象来记录图形绘制的路径,需要一个Canvas类来执行绘图操作,还需要一个Bitmap类来盛放绘画的结果. Paint mPaint = new Paint(); mPaint.setAntiAlias(true); mPain

  • python matplotlib模块基本图形绘制方法小结【直线，曲线，直方图，饼图等】

    本文实例讲述了python matplotlib模块基本图形绘制方法.分享给大家供大家参考,具体如下: matplotlib模块是python中一个强大的绘图模块 安装 pip  install matplotlib 首先我们来画一个简单的图来感受它的神奇 import numpy as np import matplotlib.pyplot as plt import matplotlib zhfont1=matplotlib.font_manager.FontProperties(fname

  • Python OpenCV实现基本图形绘制

    Python OpenCV实现基本图形绘制

    1.导入模块 import cv2 as cv import numpy as np 2.OpenCV绘图大致步骤 OpenCV 图形绘制步骤 (1)先定义基础画布canvas = np.zeros((400,600,3),dtype=np.uint8)+255 (2)画布分界,(300,0)分别是宽.高cv.line(canvas,(300,0),(300,399),(0,0,0,),2) (3)在画布上绘制图形,如画圆cv.circle(canvas, (150, 300), 88, (0,

  • Python 图形绘制详细代码

    Python 图形绘制详细代码

    目录 1.画第一个图形 1.1 代码 1.2 输出 1.3 代码的部分解释 2.在同一图上绘制两条或多条线 2.1 代码 2.2 输出 2.3 代码的部分解释 3.自定义绘图 3.1 代码 3.2 输出 3.3 代码的部分解释 1.画第一个图形 第一个图形从简单的开始. 1.1 代码 # importing the required module import matplotlib.pyplot as plt # x axis values x = [1,2,3] # corresponding

随机推荐