gRaphael——JavaScript 矢量图表库:两行代码实现精美图表

前端之家收集整理的这篇文章主要介绍了gRaphael——JavaScript 矢量图表库:两行代码实现精美图表前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

<p id="About.what-is-Raphael" class="dr-method">gRaphael 是一个致力于帮助开发人员在网页中绘制各种精美图表的 <a href="http://www.cnblogs.com/lhb25/category/146074.html" target="_blank">Javascript 库,基于强大的 <a href="http://www.cnblogs.com/lhb25/archive/2013/01/06/raphael-js-reference.html" target="_blank">Raphael 矢量图形库。你只需要编写几行简单的代码就能创建出精美的条形图、饼图、点图和曲线图。


<p class="dr-method">  gRaphael 使用 SVG W3C 推荐标准和 <a href="https://www.google.com.hk/url?sa=t&amp;rct=j&amp;q=&amp;esrc=s&amp;source=web&amp;cd=1&amp;cad=rja&amp;ved=0CDQQFjAA&amp;url=http%3A%2F%2Fzh.wikipedia.org%2Fzh-cn%2FVML%25E8%25AF%25AD%25E8%25A8%2580&amp;ei=RQPtUKHFIcHskAXU_oDQAg&amp;usg=AFQjCNF2itOkBqSPkGY--lSsshLc2lCapQ&amp;sig2=Tq5fOxe3awcRe9TmGCgNMg" target="_blank">VML 作为创建图形的基础,是跨浏览器的矢量图形库,目前支持的浏览器包括: Firefox 3.0+,Safari 3.0+,Chrome 5.0+,Opera 9.5+ 以及 Internet Explorer 6.0+。


<p class="dr-method"> 


<p class="dr-method"><a href="http://dreamsky.github.com/main/blog/raphael/piechart.html" target="_blank">

<img src="/res/2019/04-01/23/1a994b6c3729da7ac82aa78514901a87.jpg" alt="">


<p class="dr-method"> 


<p id="About.example" class="dr-method">  使用方法:在页面中引入 raphael.js,g.raphael.js 文件,并根据需要引入 g.line.js(曲线图),g.bar.js(条形图),g.dot.js(点图)和 g.pie.js(饼图)文件,然后根据提供的方法即可创建出你想要的精美图表,下面是两个简单示例。

  创建静态饼图

  只需要两行代码即可,示例代码

Highlighter sh-gutter">
Highlighter_976808" class="SyntaxHighlighter javascript">
 

  效果演示及完整源码下载:

     

 

  创建交互饼图

  结合 hover 和 click 事件以及动画方法,你就可以创建精美的交互式饼图,示例代码

Highlighter sh-gutter">
Highlighter_380645" class="SyntaxHighlighter javascript">

猜你在找的jQuery相关文章