JS VML实现动态绘制柱状图与饼图
需积分: 25 88 浏览量
更新于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页未读，立即下载
点击了解资源详情
点击了解资源详情
点击了解资源详情
2022-06-26 上传
2009-10-27 上传
2019-03-06 上传
2011-03-28 上传
2019-07-26 上传
2023-11-23 上传
