Home >Web Front-end >H5 Tutorial >如何在 HTML 页面上显示出有交互的统计图?

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

WBOY
WBOYOriginal
2016-06-07 08:45:113489browse

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

回复内容:

1 Open Flash Chart是一个开源的Flash制图组件。 如何在 HTML 页面上显示出有交互的统计图?

主页:teethgrinder.co.uk/open


下载:teethgrinder.co.uk/open


示例:teethgrinder.co.uk/open

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
  • 如何在 HTML 页面上显示出有交互的统计图?

    主页:maani.us/xml_charts/


    下载:maani.us/xml_charts/ind


    示例:maani.us/xml_charts/ind


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

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

    主页:solutoire.com/flotr/


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


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


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

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

    主页:teethgrinder.co.uk/open


    下载:teethgrinder.co.uk/open


    示例:teethgrinder.co.uk/open


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

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

    主页:visifire.com/


    下载:visifire.com/download_s


    示例:visifire.com/


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

  • 2D/3D column & bar charts
  • 2D/3D pie & doughnut charts
  • Line charts
  • Area charts
  • Stacked charts
  • Gantt charts
  • 如何在 HTML 页面上显示出有交互的统计图?

    主页:FusionCharts Free

    下载:fusioncharts.com/free/D

    示例:atblabs.com/jquery.corn


    7 JS Charts是一个JavaScript制图组件。支持的图表类型包括:柱状图,圆饼图,曲线图等。JS Charts支持的数据源可以是XML或JavaScript数组。
    如何在 HTML 页面上显示出有交互的统计图?

    主页:jscharts.com/

    下载:jscharts.com/free-downl

    示例:jscharts.com/examples


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

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

    主页:axiis.org/index.html

    下载:code.google.com/p/axiis

    示例:axiis.org/examples.html

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

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

    主页:jqplot.com/


    下载:bitbucket.org/cleonello


    示例:jqplot.com/tests/


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

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

    主页:Highcharts - Interactive JavaScript charts for your webpage

    下载:highcharts.com/download

    示例:highcharts.com/demo/


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

    echarts妥妥的,国产又强大,拿来就能用。
    文档齐全,样例众多,有bug或者疑问可以直接问作者。 百度做的Echarts相当的不错 看一下highcharts 要先学习JS代码,用JS先做出 饼状图和柱形图,这样实现链接跳转就很简单了 ,只要精通JS这些都可以实现! 简单到令人发指。

    把你的饼所要点选的区域都切出来,然后用定位或浮动拼一块,再设置下伪类,搞掂。
    Statement:
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn