JS VML实现动态绘制柱状图与饼图

需积分: 25 161 浏览量更新于2024-09-14 收藏 24KB DOCX 举报

本文档主要介绍了如何在JavaScript中利用特定脚本绘制不同类型的图表，包括柱状图和饼状图。首先，为了在网页上实现这些图形，开发者需要在HTML页面中引入VML（Vector Markup Language）源，这在早期的IE浏览器中被广泛用于创建矢量图形。以下是对两个核心类的简要概述： 1. `pieGraph.js` 类：这个类用于创建饼状图。使用时，开发者需要在HTML结构中添加`<html>`标签，并定义`xmlns:v`和`xmlns:o`属性来引用VML。接下来，设置样式表确保页面的字体兼容性。饼状图的绘制函数`setPie`接受几个关键参数，如容器ID（指定要在其中显示图表的`<div>`元素）、标题文本、分区名称数组、分区数据数组（以绝对数值表示，但函数会自动计算百分比）、颜色数组，以及柱状图的宽度和高度。 - 容器名称（String类型）：指定容器ID，建议使用DOM元素（如`<div>`)。 - 饼图标题（String类型）：为饼图提供一个描述性的标题。 - 分区名称数组（String Array）：包含各个饼图部分的名称。 - 数据数组（Number Array）：表示每个分区的绝对数值。 - 颜色数组（String Array）：与分区名称和数据数组一一对应的颜色。 - 宽度（number）和高度（number）：饼图的尺寸。 2. `columnGraph.js` 类：这个类负责柱状图的绘制。与饼状图类似，也需要引入VML并在HTML中使用相同的`<html>`标签和样式设置。柱状图的绘图函数`setColumns`用于初始化和绘制柱状图，它接受容器ID、标题、数据列（arrColumns）数组、颜色数组，以及柱状图的宽度和高度。 - 容器名称（String类型）：同样的，用于放置柱状图的DOM元素。 - 数据列（arrColumns）数组：表示每个柱子的高度，通常以数据值的形式存在。 - 颜色数组（String Array）：为柱状图的每个柱子分配颜色。通过这些函数，开发者可以轻松地在网页上动态创建交互式柱状图和饼状图，增强了网站的可视化效果。虽然随着现代浏览器对HTML5 Canvas和SVG的支持增强，VML已经不再是最常用的技术，但在某些老版本的浏览器中，了解并使用这些方法仍然是有用的。

2011-03-25 18:09

js 画柱状图、饼状图、折线图



采用该脚本，并引用 VML 源之后，在网页上即可通过一个简单的函数在指定容

器内绘制图形引用接口如下：

1. pieGraph.js 为饼图类，调用该饼图时，需在对应页面上引入 VML 控件：

<html xmlns:v="urn:schemas-microsoft-com:vml"

xmlns:o="urn:schemas-microsoft-com:o&ce:o&ce">

<STYLE>

v\:* { Behavior: url(#default#VML) }

o\:* { behavior: url(#default#VML) }

body{font-family:arial}

</STYLE>

简单的绘图函数：

setPie(container,title,arrName,arrData,arrColor,sizeX,sizeY)

container(String)为放置饼图的容器名称，推荐 DIV 对象

title(String)为饼图标题

arrName(String Array)为饼图分区名称

arrColor(String Array) 颜色字符串

arrData(number Array) 饼图分区数据，为绝对数值，本函数将以绝对数值

的和为 1 计算各分区的百分比

(注意：分区名称，数据和颜色字符串数组的元素个数应一致，按顺序存放)

sizeX(number)为宽度

sizeY(number)为高度

下载后可阅读完整内容，剩余9页未读，立即下载

liqunkukuli

粉丝: 0
资源: 3

JS VML实现动态绘制柱状图与饼图

js绘图，绘制各种图形，纯js

Javascript画图js包

一个JavaScript绘图和画画App

JavaScript画图画图画图画图画图

js 画图 图画板 js 画图 图画板

javascript画图

js画图

JavaScript画图

js 画图类库 js折线图 js饼状图 js柱状图

wz_jsgraphics.js javascript 画图

最新资源

js 画图图画板 js 画图图画板