如何在 HTML 页面上显示出有交互的统计图？-H5教程

想单纯画一些简单的统计图，比如柱状图 饼状图等
但是R画出来的图始终感觉交互性不强，不互动，只是一张一张的图，串起来很难形象。而且始终有些不方便。
我想在网页上显示一些统计图(数据来源是数据库统计我用perlCGI应该没问题)，并且可以有一些互动，比如点击饼状图一部分，会出现该部分的柱状图之类的。
我应该如何开始学习？

回复内容：

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

主页：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

主页：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设置样式等。

主页：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编译。

主页：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图表制作组件。

主页：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

主页：FusionCharts Free

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

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

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

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

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

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

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

主页：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，数据点高亮显示等功能。

主页：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。

主页：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这些都可以实现！ 简单到令人发指。

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