首页 > web前端 > H5教程 > 如何在 HTML 页面上显示出有交互的统计图?

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

WBOY
发布: 2016-06-07 08:45:11
原创
3488 人浏览过

想单纯画一些简单的统计图,比如柱状图 饼状图等
但是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这些都可以实现! 简单到令人发指。

    把你的饼所要点选的区域都切出来,然后用定位或浮动拼一块,再设置下伪类,搞掂。
    相关标签:
    来源:php.cn
    本站声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板