如何在 HTML 页面上显示出有交互的统计图

html-css023

如何在 HTML 页面上显示出有交互的统计图,第1张

在 HTML 页面上显示出有交互的统计图有2种方法：

一、用JavaScript做出饼状图或柱形图，需要精通JS代码。

二、利用第三方网站提供的组件：

1、Open Flash Chart是一个开源的Flash制图组件。

2、 XML SWF Charts是一个简单，但强大，利用Flash和动态生成XML数据来产生web chart的工具。

3、 Flotr是一个基于Prototype开发的javascript绘图工具。支持图例，鼠标跟踪，图片区域选择，图片缩放，添加事件钩子（event hook），通过CSS设置样式等。

4、FusionCharts Free是一个制图组件用于创建好看，数据驱动，拥有动画效果的Flash charts。它能够与PHP、Python、Ruby on Rails、ASP、http://ASP.NET、JSP、ColdFusion、HTML页面等一起使用。这个组件是FusionCharts的免费版，但功能仍然很强大。

你可以用JS根据标签名获取对应的标签，然后获取它们的length属性就可以了。比如，这样：

var  h4 = document.getElementsByTagName("h4").length

console.info("h4标签个数"+h4)

把这个代码放到页面最后，就知道整个页面的h4标签的个数，也就是使用次数啦。

如果你要同时获取多个标签数量，那么你就把几个标签写进一个数组里，遍历，依次输出个数。

var  tagArr = ["div","a","h4"]

for( var  i = 0  i<= tagArr.length-1  i++){

    var  tagNum = document.getElementsByTagName(tagArr[i] ).length

    console.info(tagArr[i]+"个数是"+tagNum  )

}