介绍一款使用html5画图的JS开源软件ichartjs

示例代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<script type="text/javascript" src="ichart.1.2.min.js" ></script>
<script>
$(function(){
var data = [
{name : 'UC浏览器',value : 40.0,color:'#4572a7'},
{name : 'QQ浏览器',value : 37.1,color:'#aa4643'},
{name : '欧朋浏览器',value : 13.8,color:'#89a54e'},
{name : '百度浏览器',value : 1.6,color:'#80699b'},
{name : '海豚浏览器',value : 1.4,color:'#92a8cd'},
{name : '天天浏览器',value : 1.2,color:'#db843d'},
{name : '其他',value : 4.9,color:'#a47d7c'}
];
var chart = new iChart.Pie3D({
render : 'canvasDiv',
data: data,
title : {
text : '2012年第3季度中国第三方手机浏览器市场份额',
color : '#3e576f'
},
sub_option : {
label : {
background_color:null,
sign:false,//设置禁用label的小图标
padding:'0 4',
border:{
enable:false,
color:'#be5985'
},
fontsize:11,
fontweight:600,
color : '#be5985'
},
},
offset_angle:-60,//逆时针偏移60度
mutex : true,//只允许一个扇形弹出
showpercent:true,
border :false,
decimalsnum:2,
width : 800,
height : 400,
radius:150
});chart.draw();
});
<script>

效果如下:

优点是:免费 apache2.0
缺点是: 纯HTML5 不支持IE8及以下版本
官方网站:http://www.ichartjs.com/


留言

提示:你的email不会被公布,欢迎留言^_^

*

验证码 *