用g.raphael.js高速绘制饼图、柱状图、点状图、折线图（下）

首先，这里有个g.raphael.js的范例文章，可以直接看，我就不转载了：

http://www.cnblogs.com/lhb25/archive/2013/01/09/gRaphael-javascript-chart-library.html

好了，接下来我们来试试创建柱状图：

首先导入我们上一篇里面讲到的几个js，记得要按照上面从上到下的顺序导入，因为g.raphael是基于raphael的，只有raphael.js先加载完毕之后，它才能够顺利正常加载，同理，g.bar、g.pie、g.dot、g.line这四个则是基于g.raphael的，它们必须在graphael加载完毕之后才可以正常加载。

接着我们需要在html里面随便插入一个带有id的div。

<body>
<div id="x"></div>
</body>
然后就可以来写script了。

<html>  <head>  <title>范例</title>  </head>  <body>  <div id="x"></div>  </body>
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript" src="g.raphael-min.js"></script>
<script type="text/javascript" src="g.bar-min.js"></script>
<script type="text/javascript">  var paper = Raphael("x",650,400);paper.barchart(0,0,200,300,[30,20,10],{type:"round"});
</script>
</html>

绘制之后的样子：

接下来简单讲解一下柱状图，

var paper = Raphael("x",650,400);

这一句是创建raphael画布，创建位置是我们的id “x”，也就是生成于div中。宽度是650，高度是400。

下面的bar.chart的参数如下:

Paper.barchart(x,y,width,height,values,opts);

x、y就不用说了，图的起点左上角坐标，width和height也不用说了，宽度和高度，values说一下，是数组，而且必须是数值组成的数组，不可以使用字符串之类的非数值，不然会报错，上面我随便写的是30、20和10三个值，用户可以随便写。最有看头的是最后面花括号里的一些option。这个是对图的一些属性扩展。

对于柱状图，有以下属性：

type，必须用字符串，比如我上面的”round“，画出来就是圆角的柱状图。默认是square，还有sharp、soft

gutter，默认”20%“，表示各个条图之间的间距。该值放大之后，条形图也会相应缩小。

vgutter，表示纵向间距，但对于柱状图来说没什么用。（如果用到了官网介绍的横向柱状图，那么该值当然就是有用的。）

colors，这个很重要，也用数组，决定每一个柱状图的颜色。如：colors:["red","green","blue"],

stackedtostretch，真或假，官方说可以在图上显示字体，但实测无效。。。汗。。

好了，柱状图就介绍到这里，接下来介绍的是一个叫做Paper.blob的属性，其实就是在你的图上面加一个注释。

比如：

paper.blob(50, 50, "$9.99", 60);

第一和第二个参数是x和y，就不解释了。第三个带引号的参数是你的注释内容。最后一个是旋转角，用文字不方便说明，我用两张图来给大家看一下就明白了：

这一张图的角度是60度。它的角度计算方法是以y轴为起点逆时针的计算。

这一张图是120度，看出来了吧，其实就是注释块的圆块在旋转。不过可惜的是注释块不能改颜色……

接下来是点状图，这个用的并不多：

先看看例子：

var paper = Raphael("x",650,500);
paper.dotchart(0, 0, 620, 500, [76, 70, 67, 71, 69], [2, 1, 2, 3, 4], [100, 120, 140, 160, 500], {max: 20, axisylabels: ['Mexico', 'Argentina', 'Cuba', 'Canada', 'United States of America'], heat: true, axis: '0 0 1 1'})

前四个参数和柱状图一样，就不说了。第五和第六个参数表示数值的xy值的大小。后面是size，表示圆圈的大小，该值与属性里面的max成对应的关系。什么意思呢？这个要从max值说起，首先max值是指原的直径，默认是100，在这里改成了10，单位是毫米。在上面的圆圈中，我们设定的大小是[100, 120, 140, 160, 500]，那么最大的500就会变成10的尺寸，其余的根据其与500的比例进行相应的缩小（如图）。

接下来我们来看看它的一些属性，首先是max，这个已经讲了。

然后是symbol，也就是每一个小图形的形状，作者说目前只有circle一个值，也就是圆圈。

接着是gutter，和上面的柱状图一样，表示两个symbol之间的间距。

然后是heat，这是个布尔值，默认false，为真的情况下，圆圈越大，颜色越暖（红到绿，如图），如果为假则默认所有圆圈都是蓝色。

opacity，不透明度，默认为1。使用这个属性之后，越小的圆圈会越透明。

href，数组，看名字就知道是配合点击事件进行跳转用的链接。

axis，表示轴，我们例子中是”0,0,1,1“分别对应顶部轴、右边轴、底部轴和左边轴。0表示空，1表示渲染出该轴线。

axisxstep，step表示格子，假设我们设置axisxstep:3，那么底部就只剩下三格，其余的均被省略。该值可用于简化x轴或y轴上面的锚点数量。如果一个轴上面有三个格子，那么出去头尾之后，中间有两个锚点。该值对应顶部轴和底部轴。

axisystep，这个和上面的一样，对应的是y轴，也就是左边轴或右边轴。

axisxlabels，数组，在对应的锚点位置想要显示什么字符串，一般来说是和上面的值axisxstep配合使用的。如果没有限定axisxstep的话，那么axisxlabels就会从头开始替换掉对应的锚点上的字符内容，但后续的锚点字符依然是默认的数字。

axisylabels，数组，和上面的类比就懂了。

axisxtype，有‘t’、‘,’、‘-’、‘+’、‘|’等值，作用不明……

axisytype，类比上面的那个，作用依然不明，貌似是在默认的值前面加个符号什么的……总之是一个用不着的蛋疼属性。

点状图的数据相对来说比较复杂，而且绘制速度相对较慢，不推荐使用。

接下来我们来看看Paper.drop。和上面的Paper.blob是大同小异的东西，只是形状不一样，就不用再重复介绍了。

var paper = Raphael("x",650,500);
paper.dotchart(0, 0, 620, 500, [76, 70, 67, 71, 69], [2, 1, 2, 3, 4], [100, 120, 140, 160, 500], {max: 20, axisylabels: ['Mexico', 'Argentina', 'Cuba', 'Canada', 'United States of America'], heat: false, axis: '1 0 1 1', axisxstep: 3,axisytype:'t'})
paper.drop(200, 250, "$9.99", 60);

接下来在看看Paper.flag和Paper.label，后者没有angle参数，其他的都和上面的一样。就不再赘述。下面给出图片。

paper.drop(200, 250, "$9.99", 60);
paper.flag(250, 250, "$9.99", 60);
paper.label(300, 250, "$9.99");

接下来我们来看看折线图。

var paper = Raphael("x",650,500);
paper.linechart(0, 0, 300, 200, [1,2,3,4,5], [[1,2,3,4,5], [1,3,9,16,25], [100,50,25,12,6]], {smooth: false, colors: ['red', 'blue', 'green'], symbol: 'circle'});

首先x、y、width、height参数就不用介绍了，接着valuesx和valuesy和上面的点状图是一样的，不同的是多个折线图一般情况下是共用一个valuesx的，这一点需要注意。

接下来我们来看看折线图有哪些属性：

gutter，和上面一样，表示symbols之间的距离。

symbol，哎，作者没给出什么好的，只有circle圆圈和 ‘ ’，‘ ’表示什么都木有。

width，就是symbol的大小，数值越大，symbols的圆圈的大小就越大，没多大用。

colors，最重要的一个参数，不解释了。

shade，布尔值，默认false，设置为true的时候就会产生阴影，至于阴影到底是怎样，直接来个图好说明一些：

nostroke，stroke表示连线的意思，顾名思义，nostroke就是没有连线。该值是布尔值，默认情况下是false，如果改为true的话，那上面圆圈之间的连线就会消失。特别注意：在没有连线的情况下，如果依然使用了阴影属性，那么阴影就不会有半透明的效果了，会变成和你设置的颜色一样的颜色（那叫一个丑啊……）

dash，字符串，官方说该值可以改变symbols之间的连线方式，默认continues也就是正常连线，可以改成dashed也就是条状虚线，还有dotted也就是点状虚线，但是亲测无效，不知道是不是被作者给坑了啊……

smooth，柔和过渡，该值为布尔值。如果为true的话，那么两点之间的连线就不是直线，而成了曲线。如果是false就是直线。

axis，这个是轴，上面已经讲过了，就不用说了吧。

axisxstep和axisystep，上面都讲过了，不说了。

接下来我们来看看饼图了。

var r = Raphael(10, 50, 640, 480);
r.piechart(320, 240, 100, [55, 20,11],{init:true, stroke:"#fff",colors:["red","#654321","pink"],legend:["红色","棕色","粉色"],lengendmark:"text"})

饼图的四个参数，分别是cx，cy，r，values，values就不用说明了。cx和cy表示圆心的x坐标和y坐标，而r是半径。

接下来看看相关的一些属性：

minPercent，默认值为1，当你的某一片最小的内容小于该值时就会浓缩在一大片里面，变成一个others。（直接看图吧，我设置了minPercent:60）

maxSlices,表示你想要画出的扇形片的最大数量，举个例子，你有十个数据，但是你设置了maxSlices等于3，那么只有最大的三个数据会被渲染成三片，其他的都被合成了一个大大的others，明白了吧？

stroke，表示所有扇形的边框的颜色，记住是所有，而不是单独的某一个。

strokewidth，扇形边框线的宽度。

init，布尔值，默认是false，如果设置为true的话就会开启动画效果，在载入饼图时，会看到饼图从半径为零慢慢变大，直到增大至最大半径。

colors，数组，不解释了。

href，跳转链接的数组，不解释了。

legend，数组，表示注释文字，可以参考我上面的例子。

legendcolor，注释文字的颜色，默认是黑色的。

legendothers，字符串，当出现others时可以改成其他的文字，比如我们可以改成中文的"其他"。

legendmark，字符串，修改注释文字前面的小图形的形状，默认是圆形，而且也只有圆形。。。你改了其他也不会有效果的。。

legendpos，注释文字的位置，默认是”east“，还可以是”west“、”south“和”north，但只能确定布局的位置，不能调节具体的距离。。

接下来再介绍一个Paper.popup

非常简单，共有五个参数，前面三个分别是x、y和文字内容，第四个是direction，即方向，可以是left、right、down和up中的一个。size表示padding值，默认是5。

示例：

paper.popup(50,50,'$9.99','down');

如图，不用再做其他说明了吧？

g.raphael就介绍到这里了。官网还有一部分关于动作的api，以及一些横向的图我没有列举出来。（比如横向的柱状图）并不是很复杂，大家可以自己去官网查看api研究研究一下即可。时间关系，g.raphael的内容就研究到这里啦。

官网api：http://g.raphaeljs.com/reference.html

用g.raphael.js高速绘制饼图、柱状图、点状图、折线图（下）相关推荐

用g.raphael.js高速绘制饼图、柱状图、点状图、折线图（上）
首先介绍一下什么是g.raphael.这个又要说到什么是raphael.js.raphael是一个javascript库,可以用来跨浏览器绘制各种图形,只要是你想得到的图形都可以用raphael绘制出 ...
使用DevExpress的WebChartControl控件绘制图表(柱状图、折线图、饼图)
WebChartControl是DevExpress控件群下的一个Web图表控件,它使用非常的方便,生成的图表也相当的漂亮. 先贴出几张WebChartControl生成的图表: Web页面代码Web ...
【转】使用DevExpress的WebChartControl控件绘制图表(柱状图、折线图、饼图)
第一次写博,没什么经验,主要是把最近自己对Dev的一些研究贴出来大家共同探讨,有不足之处望大家帮忙斧正. WebChartControl是DevExpress控件群下的一个Web图表控件,它使用非常的 ...
C# WinForm开发系列之c# 通过.net自带的chart控件绘制饼图,柱形图和折线图的基础使用和扩展
一.需要实现的目标是: 1.将数据绑定到pie的后台数据中,自动生成饼图. 2.生成的饼图有详细文字的说明. 1.设置chart1的属性Legends中默认的Legend1的Enable为false: ...
QT绘制饼图+柱状图+折线图
项目需要使用到不同的统计图案的方法来显示统计数据包括:饼图.柱状图.折线图. 饼图的实现具体实现代码如下: 首先需要一个QChartView来存放饼图,实现如下: 拖拽一个QGraphicsVie ...
从零开始的JavaScript入门-使用JS绘制柱状图与折线图
上一篇博客讲解了如何使用JS绘制美观的热图,本篇准备讲解一下最基本的统计图:柱状图与折线图. 这两个图其实本质上是一样的.老样子,先上效果: 再上代码: <!DOCTYPE html> & ...
ECHARTS的基本使用：柱状图、折线图、饼图等
Echarts 是由百度团队打造的一款纯 Javascript 的图表库,官网下载路径如下: http://echarts.baidu.com/download.html Echarts的特性: 丰富 ...
java使用poi操作world生成饼图，柱状图，折线图，组合图：二
java使用poi操作world生成饼图,柱状图,折线图,组合图:二上文和问题链接直接上代码 maven 测试类:单图表(入口) 测试类:组合图表(入口) 工具类:组合数据类工具类:枚举解析图表 ...
Echarts通用饼图、柱状图、折线图封装
简单封装Echarts js不熟可能有问题,学习之后在完善数据类型实现代码具体调用数据类型我这里用了三种数据类型饼图 var pieData = [{'name' : 'aaa', 'v ...

用g.raphael.js高速绘制饼图、柱状图、点状图、折线图（下）

用g.raphael.js高速绘制饼图、柱状图、点状图、折线图（下）相关推荐

最新文章

热门文章