html页面显示用户在线统计,如何在 HTML 页面上显示出有交互的统计图?

想单纯画一些简单的统计图,比如柱状图 饼状图等

但是R画出来的图始终感觉交互性不强,不互动,只是一张一张的图,串起来很难形象。而且始终有些不方便。

我想在网页上显示一些统计图(数据来源是数据库统计我用perlCGI应该没问题),并且可以有一些互动,比如点击饼状图一部分,会出现该部分的柱状图之类的。

我应该如何开始学习?

回复内容:

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

fc39bce661841b93ddcb7893af184f67.png

主页:http://teethgrinder.co.uk/open-flash-chart/

下载:http://teethgrinder.co.uk/open-flash-chart/download.php

示例:http://teethgrinder.co.uk/open-flash-chart/

2 XML SWF Charts是一个简单,但强大,利用Flash和动态生成XML数据来产生web chart的工具。当前支持的Charts类型包括:

Line

Column

Stacked column

Floating column

3D column

Stacked 3D column

Parallel 3D column

Pie

3D Pie

Bar

Stacked bar

Floating bar

Area

Stacked area

Candlestick

Scatter

Polar

Mixed

Composite

Joined

fc39bce661841b93ddcb7893af184f67.png

主页:http://www.maani.us/xml_charts/

下载:http://www.maani.us/xml_charts/index.php?menu=Download

示例:http://www.maani.us/xml_charts/index.php?menu=Gallery

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

fc39bce661841b93ddcb7893af184f67.png

主页:http://solutoire.com/flotr/

下载:http://code.google.com/p/flotr/

示例:http://code.google.com/p/flotr/

4 Open Flash Chart2是依据Open Flash Chart1.x完全重新构建的一个Flash图表绘制组件。与1.x版本最大不同之处在于把数据格式改成JSON,以实现一些更酷的功能。该版本全部采用Actionscript3开发,Adobe Flex编译。

fc39bce661841b93ddcb7893af184f67.png

主页:http://teethgrinder.co.uk/open-flash-chart-2/

下载:http://teethgrinder.co.uk/open-flash-chart-2/downloads.php

示例:http://teethgrinder.co.uk/open-flash-chart-2/area-hollow.php

5 Visifire是一组开源的Microsoft Silverlight图表制作组件。 Visifire让你利用ASP、http://ASP.Net、PHP、JSP、ColdFusion、Ruby on Rails或是只有HTML都能快速制作出“惊人”的图表(Charts)。不需要懂得任何Silverlight知识,只要具备基础的HTML知识,就能够使用该强大的Silverlight图表制作组件。

fc39bce661841b93ddcb7893af184f67.png

主页:http://www.visifire.com/

下载:http://www.visifire.com/download_silverlight_charts.php

示例:http://www.visifire.com/

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

2D/3D column & bar charts

2D/3D pie & doughnut charts

Line charts

Area charts

Stacked charts

Gantt charts

fc39bce661841b93ddcb7893af184f67.png

主页:FusionCharts Free

下载:http://www.fusioncharts.com/free/Download.asp

示例:http://www.atblabs.com/jquery.corners.html

7 JS Charts是一个JavaScript制图组件。支持的图表类型包括:柱状图,圆饼图,曲线图等。JS Charts支持的数据源可以是XML或JavaScript数组。

fc39bce661841b93ddcb7893af184f67.png

主页:http://www.jscharts.com/

下载:http://www.jscharts.com/free-download

示例:http://www.jscharts.com/examples

8 Axiis是一个基于Degrafa,Flex&ActionScript3.0开发的开源数据图表组件。

fc39bce661841b93ddcb7893af184f67.png

主页:http://www.axiis.org/index.html

下载:http://code.google.com/p/axiis/downloads/list

示例:http://www.axiis.org/examples.html

9 jqPlot是一个jQuery绘图插件,可以利用它制作漂亮的线状图和柱状图。jqPlot支持为图表设置各种不同的样式。提供Tooltips,数据点高亮显示等功能。

fc39bce661841b93ddcb7893af184f67.png

主页:http://www.jqplot.com/

下载:http://www.bitbucket.org/cleonello/jqplot/downloads/

示例:http://www.jqplot.com/tests/

10 Highcharts JS是一个纯JavaScript制图Library,支持的图表类型包括:line、spline、area、areaspline、column、bar、pie和scatter。当鼠标移到图表上时会利用一个tooltip展示每一点或区域上相关的文本信息。可以放大图表,查看某部分更详细的数据。Highcharts支持大部分浏览器包括iPhone和IE6。

fc39bce661841b93ddcb7893af184f67.png

主页:Highcharts - Interactive JavaScript charts for your webpage

下载:http://www.highcharts.com/downloads/zips/Highcharts.zip

示例:http://www.highcharts.com/demo/

先提供这十个吧,不知道是不是你想要的,玩会了其中几个就行了。

echarts妥妥的,国产又强大,拿来就能用。

文档齐全,样例众多,有bug或者疑问可以直接问作者。

百度做的Echarts相当的不错

看一下highcharts

要先学习JS代码,用JS先做出 饼状图和柱形图,这样实现链接跳转就很简单了 ,只要精通JS这些都可以实现!

简单到令人发指。

把你的饼所要点选的区域都切出来,然后用定位或浮动拼一块,再设置下伪类,搞掂。

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值