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>

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

时间: 2020-10-15

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

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

用JavaScript绘图 ——JS2D函数集

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

JavaScript基础——使用Canvas绘图

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

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 =

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

RequireJS简易绘图程序开发

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

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

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

用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如何实现动态可刷新曲线图

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

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

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

JS页面动态绘图工具SVG,Canvas,VML介简介

说到绘图.报表之类的技术,大家首先想到的就是Flex,当然也有许多了解javaapplet,对于这两种技术来说,各有利弊. 首先Flex很笨重,但是其效果实在让人喜欢.对于javaapplet来说,至少我在网络上很少看到,当然对于我们做开发的来说在我们的开发工具或者内部网络上还是有一些的. 其实现在Web上进行绘图的话还是有很多选择的,你可以到谷歌上搜索JS绘图,会有很多绘图工具提供给你使用,而且功能非常强大.比如说maxGraph,你可以到http://www.jgraph.com/mxgra

mapper--图片热点区域高亮组件官方站点

很有意思的一个东西,我们都用过图片热点对多个切片做链接,也用过链接的hover高亮效果,但却没有办法实现图片热点的高亮效果(即鼠标悬停在某个热点区域时该区域高亮显示). Mapper就是这样的小组件,利用js绘图和css定义实现了这样一个很有用处的功能. 官方站点及演示:http://www.netzgesta.de/mapper/ =================================== PS:除此之外,该站还有一些其他的图片特效js库,对图片的各种效果做的真是炉火垂青!赞! 进

原生JS使用Canvas实现拖拽式绘图功能

一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包含圆心坐标点和半径)等实体 2.原生JavaScript实现,不依赖任何第三方js库和插件 3.多图形绘制(支持画笔.线条.箭头.三角形.矩形.平行四边形.梯形以及多边形和圆形绘制) 4.拖拽式绘制(鼠标移动过程中不断进行canvas重绘) 5.图片绘制(作为背景图片时重绘会发生闪烁现象,暂时有点问题,后面继续完善) 5.清空绘制功能 6.新版本优化绘制性能(使用共享坐标变量数

基于Two.js实现星球环绕动画效果的示例

Two.js 是面向现代 Web 浏览器的一个二维绘图 API.Two.js 可以用于多个场合:SVG,Canvas 和 WebGL,旨在使平面形状和动画的创建更方便,更简洁. Two.js 有一个内置的动画循环,可搭配其他动画库.Two.js 包含可伸缩矢量图形解释器,这意味着开发人员和设计人员都可以在商业应用中,如 Adobe Illustrator 中创建 SVG 元素,并把它引入 Two.js 使用场景中. 效果如下: 下面是核心js code HTML就不贴了,需要引入two.js文件

two.js之实现动画效果示例

一.什么是two.js? Two.js 是面向现代 Web 浏览器的一个二维绘图 API.Two.js 可以用于多个场合:SVG,Canvas 和 WebGL,旨在使平面形状和动画的创建更方便,更简洁. Two.js 有一个内置的动画循环,可搭配其他动画库.Two.js 包含可伸缩矢量图形解释器,这意味着开发人员和设计人员都可以在商业应用中,如 Adobe Illustrator 中创建 SVG 元素,并把它引入 Two.js 使用场景中. 二.导入two.js 三.用two.js实现动画 1)