android之ichartjs图表
1.http://www.ichartjs.com pdf下载：http://download.csdn.net/detail/menglele1314/8721121
2. 简介
what’s the ichartjs? 2.1.
ichartjs 是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各
式图形。 ichartjs致力于为WEB应用提供简单、直观、可交互的体验级图表组件。是WEB图表展示方面
的解决方案 。如果你正在开发HTML5的应用，ichartjs正好适合你。 ichartjs目前支持饼图、折线图、
区域图、柱形图、条形图。ichartjs是基于Apache License 2.0协议的开源项目。于2012年11月20
日发布了正式的v1.0版本。
特点 2.2.
ichartjs是一款基于HTML5的图形库。所以天生具有以下特点：
轻量级代码
运行速度快
跨平台
基于事件的交互性
自定义绘图接口
灵活的Web视觉效果
应用场景 2.3.
ichartjs 是一款基于HTML5的图形库。它是基于web的图形库，所以它的运行环境就是支持HTML5
的浏览器，如今，主流的浏览器已经可以很好的支持HTML5了。ichartjs致力于为企业应用提供简单、
直观、可交互的体验级图表组件。并且提供一个跨平台的统一视图。所以很适应于应用具有多平台，多
终端的web应用。适用于iPhone与android的手机平台。
3. 部署与结构
一步部署 3.1.
ichartjs本质上就是一个js库，所以只要将其引入你的页面即可。代码如下：
<script type="text/javascript" src="ichart-1.0.min.js"></script>
引入ichart.1.0.min.js就完成了搭建ichartjs运行环境的操作。
组件结构分析 3.2.
Element:组件顶级父类，定义了配置功能特性。
Painter: 画图的抽象类，定义了画图功能特性。
Chart：图表的父类，定义了图表的基本属性以及事件的特性。
Component:图表组件的父类，定义了具有画图以及响应事件的特性。
Html：所有以html方式构建的组件的父类，定义了基本css属性。且具有Transition动画特性。
以上所有继承Chart的组件均为图表组件，继承Component的组件均为图表服务的小部件，继承Html
的则属于利用Html模拟一些效果的部件。
抽象组件，不可以被实例化
组件，可以被实例化
一分钟快速入门之HelloWorld 3.3.
说明 3.3.1.
在这节中，我们利用2D柱形图来展示Hello World的各个字母在字母表中的位置的情况。我们将位
置抽象为其高度。来以我们的方式来展示一个不一样的Hello World。
预览 3.3.2.
代码 3.3.3.
导入ichart.js Code
<script type="text/javascript" src="ichart-1.0.min.js"></script>
Javascript 代码
//定义数据源
var data = [
{name : ‘H‘,value : 7,color:‘#a5c2d5‘},
{name : ‘E‘,value : 5,color:‘#cbab4f‘},
{name : ‘L‘,value : 12,color:‘#76a871‘},
{name : ‘L‘,value : 12,color:‘#76a871‘},
{name : ‘O‘,value : 15,color:‘#a56f8f‘},
{name : ‘W‘,value : 13,color:‘#c12c44‘},
{name : ‘O‘,value : 15,color:‘#a56f8f‘},
{name : ‘R‘,value : 18,color:‘#9f7961‘},
{name : ‘L‘,value : 12,color:‘#76a871‘},
{name : ‘D‘,value : 4,color:‘#6f83a5‘}
];
$(function(){
new iChart.Column2D({
render : ‘canvasDiv‘, //渲染目标
data: data,//绑定数据
title :{ text:‘Hello World\‘s Height In Alphabet‘}, //设置标题
width : 800, //图表宽度
height : 400, //图表高度
coordinate:{ //设置坐标系
scale:[{
position:‘left‘, //左边值轴
start_scale:0, //起始刻度值
end_scale:26, //结束刻度值
scale_space:2, //刻度值间距
listeners:{
parseText:function(t,x,y){
return {text:t+" CM"}//个性化值轴
}
}
}]
}
}).draw();//调用draw方法进行绘图
});
Html 代码
<div id=”canvasDiv” ></div>
在你的页面中敲入上述代码，之后用浏览器打开这个页面，就是出现开头预览的效果。
4. 基础篇
$符号的含义 4.1.
$符号是iChart对象的简写，同时它是一个便捷的函数，使你的Dom元素加载之后再运行代码。作
用类似body里的onload函数。如果你使用了其他的js库也使用了$，比如：jQuery。则在使用的时候
直接用iChart代替$即可。
数据格式的定义 4.2.
ichartjs注重于图表的展示，所以数据源统一采用json对象方式。对于其他格式请自行转换为json
格式。数据源种类分为单一数据源与集合多值数据源, 单一数据源的值为单一的数值，而集合多值数据
源为数值集合。不同图表利用不同的数据源。
单一数据源 4.2.1.
单一的数据源格式为[{},{},{}];
其中每个对象配置项如下：
name:数据项名称。
value:数据项值，可能值为数字或者数组。
color:数据项(扇形)的颜色。
line_width(可选):用于折线图，表示线条的宽度。
例如：
代码片段：
var data = [
{name : ‘IE6‘,value : 20,color:‘#a5c2d5‘},
{name : ‘ IE7‘,value : 15,color:‘#cbab4f‘},
{name : ‘ IE8‘,value : 25,color:‘#76a871‘},
{name : ‘ IE9‘,value : 30,color:‘#9f7961‘},
{name : ‘ IE10‘,value : 10,color:‘#a56f8f‘}
];
多值数据源 4.2.2.
多值数据源拥有两个与数据相关的属性，data, labels。与单一的数据源相比多了一个labels属性，
并且data的value是数组的。我们没有将这两个属性整合到一起，因为你一旦理解这两个属性的作用。
写起来是相当的容易的。
data的格式范例：
代码片段：
var data = [
{
name : ‘DPS01A‘,
value:[45,52,54,74,90,84],
color:‘#1f7e92‘
},
{
name : ‘DPS01B‘,
value:[60,80,105,125,108,120],
color:‘#2b7f39‘
}
];
labels的格式范例：
代码片段：
var labels= ["一月","二月","三月","四月","五月","六月"];
可见data的value的长度是要与labels一致的，这说明labels是value对应的标签项。
大小、内边距及边框 4.3.
在创建图表时，设置图表宽度为800px,高度为400px的代码片段如下：
代码片段：
new iChart.Column2D({
width : 800,
height : 400
});
如果在手客户端需要自适应屏幕，则设置fit:true即可。
设置图表的内边距 4.3.1.
在创建图表时，设置图表内边距为10px的代码片段如下：
代码片段：
new iChart.Column2D({
padding : 10
});
图表的边框 4.3.2.
设置图表的边框，此配置同时适用于图表组件中的边框设置。设置边框的属性如下：
enable :是否开启边框特性
color :边框颜色
width : 边框宽度
radius :边框圆角值
在创建图表时，设置图表边框的代码片段如下：
代码片段：
new iChart.Column2D({
border : {
enable : false,
color : ‘#BCBCBC‘,
width : 1,
radius : 5
}
});
对齐方式与偏移量 4.4.
设置组件的大小 4.4.1.
设置图表的对齐方式 4.4.2.
设置主图在图表中的位置。
在创建图表时，设置图表对齐的代码片段如下：
代码片段：
new iChart.Column2D({
align : ‘left‘
});
图表的对齐边界是设置内边距之后的。如果想要达到很精确的位置。你应该配合位置偏移量使用。
设置图表的偏移量 4.4.3.
设置主图的坐标偏移量，有两个关键属性：
offsetx:x轴方向的偏移量，正数向右偏移，负数向左偏移。
offsety:y轴方向的偏移量，正数向下偏移，负数向上偏移。
如果想要达到很精确的位置。你应该配合位置偏移量使用。
在创建图表时，设置图表偏移量的代码片段如下：
代码片段：
new iChart.Column2D({
offsetx : 10,
offsety : 10
});
阴影效果 4.5.
阴影效果是图表组件共有的属性，但一般我们主要对图表进行设置。设置阴影主要有以下几个属性：
shadow：是否启用阴影效果。
shadow_blur：阴影效果的模糊值。
shadow_color:阴影颜色。
shadow_offsetx:阴影x轴偏移量，正数向右偏移，负数向左偏移。
shadow_offsety: 阴影y轴偏移量，正数向下偏移，负数向上偏移。
启用图表的阴影效果或多或少会影响图表的渲染时间，当你对渲染速度没有苛刻的要求的时候请放
心使用。
在创建图表时，设置图表阴影的代码片段如下：
代码片段：
new iChart.Column2D({
shadow : true,
shadow_ blur : 4,
shadow_ color : ‘#111111’,
13
shadow_offsetx : 2,
shadow_offsety : 2
});
背景色与渐变 4.6.
设置背景色 4.6.1.
背景色是一个基本的属性，图表中的组件都拥有这个属性，图表中的颜色属性支持：rgb,rgba, 颜色名称
的颜色(如:gray)和十六进制值的颜色（比如 #ff0000）。
在创建图表时，设置图表背景色的代码片段如下：
代码片段：
new iChart.Column2D({
background_color : ‘#EFEFEF’
});
设置渐变 4.6.2.
渐变是一个很常见的配色技巧，组件中也提供了便捷设置渐变的属性：
gradient ：是否开启渐变，默认false。
color_factor :颜色渐变因子。取值越大渐变效果越大，颜色变化是基于背景颜色的。取值范围{0.01
- 0.5}.默认 0.15。
gradient_mode：渐变模式，有以下几个可选值：
‘LinearGradientUpDown‘：上-下
‘LinearGradientDownUp‘：下-上
‘LinearGradientLeftRight‘：左-右
‘LinearGradientRightLeft‘：右-左
‘RadialGradientOutIn‘：外-内
‘RadialGradientInOut‘：内-外
其中，饼图只有外-内，内-外模式选项。
在创建图表时，设置图表背景渐变的代码片段如下：
代码片段：
new iChart.Column2D({
gradient : true,
color_factor:0.2
});
字体样式 4.7.
设置字体的属性如下：
font：同css的font-family。
fontsize：同css的font-size。
fontweight：同css的font-weight。
color：同css的color。
在创建图表时，设置图表标题字体的代码片段如下：
14
代码片段：
new iChart.Column2D({
title: {
text : ‘2012年2月份市场浏览器占用情况’ ,
font: ‘sans-serif’,
fontsize:14,
fontweight:600,
color: ‘#ffffff’
}
});
文字旋转 4.8.
调整文字的方向在文本过长，数据多，空间狭小的情况下使用。
在创建图表时，设置x轴label的文字向下45度的代码片段如下：
代码片段：
new iChart.Column2D({
label:{
rotate:-45,
textBaseline:‘middle‘,
textAlign:‘right‘
}
});
代码含义为，以右侧中部为原点，逆时针方向旋转45度。
图表的标题 4.9.
标题是图表必不可少的一部分，我们提供主标题与副标题。并且副标题必须在主标题存在的情况下
而存在。图表的标题与副标题设置方式一致。其主要配置属性如下：
title : 主标题配置项，你可以提供字符串配置项或者对象配置项，若给出的是字符串，则会用默
认的字体颜色等配置渲染标题，若给出的是一个iChart.Text对象的配置项，则用对象配置项进行渲染。
title_align : 标题的对齐方式。
subtitle : 副标题配置项，与主标题一致，你也可以提供字符串配置项或者对象配置项。
在创建图表时，设置图表标题的代码片段如下：
代码片段：
new iChart.Column2D({
title: ‘2012年2月份市场浏览器占用情况’,
sub title : ‘IE依然领先于其他浏览器’,
title_algin : ’ center’
});
当对标题进行左对齐或者右对齐时，可能达不到你想要的效果，这时通过偏移量来对其进行调整。
代码片段如下：
代码片段：
new iChart.Column2D({
15
title: {
text : ‘2012年2月份市场浏览器占用情况’ ,
offsetx:100
},
sub title: {
text : ‘IE依然领先于其他浏览器’ ,
offsetx:100
},
title_algin : ’ left’
});
图表的脚注 4.10.
脚注有时候会给你的图表带来意想不到的效果。是对图表信息的一个注释。一般会将数据的来源以脚注的
方式展示出来。其主要配置属性如下：
footnote : 脚注配置项，你可以提供字符串配置项或者对象配置项，若给出的是字符串，则会用默
认的字体颜色等配置渲染标题，若给出的是一个iChart.Text对象的配置项，则用对象配置项进行渲染。。
footnote _align : 脚注的对齐方式。
脚注的设置方式与标题一致。请参考 图表的标题。
label配置项的含义 4.11.
label的含义是标签，具有提示性的文字都可以称作为标签。ichartjs标签是一个iChart.Text对
象。大部分图表本身与sub_option选项的子组件均有label配置项，都是设置label文本的配置项。只
是设置的文本不同而已。具体子配置项请参考iChart.Text的api手册。图表中各个组件中label配置
含义如下：
Bar : 配置左侧标签文本。
Column : 配置底部标签文本。
Line : 配置底部标签文本。如果scale中配置了。则以scale中为准。
Pie : 无。
Scale : 配置轴标签文本。
LineSegment : 配置折线交点上方的标签文本。设置为false则禁用。
Sector : 此组件中有两个含义：当设置mini_label为true时，并且扇形角度在
mini_label_threshold_angle之上。则此配置项为iChart.Text对象。配置的为扇形图中心区域的文本。
否则，配置项为扇形图外侧标签对象。为iChart.Label对象。设置为false则禁用。
Rectangle : 配置柱形的标签文本。设置为false禁用。
过渡动画效果 4.12.
动画效果往往给人带来意想不到的效果，组件也提供一些简单的过渡动画，其属性如下：
animation：是否开启过渡动画效果。
animation_timing_function：过渡动画效果函数。
duration_animation_duration：过渡动画过程所用的时间，单位毫秒。
16
渲染动画对于手持客户端来说，目前由于硬件的原因运行效果还不够流畅，时间上会有一些延迟。
但是对于PC来讲则没有任何问题。同时注意开启阴影效果会对动画造成一定的延迟。
在创建图表时，设置图表动画的代码片段如下：
代码片段：
new iChart.Column2D({
animation: true
});
图例 4.13.
开启图例功能 4.13.1.
图例的配置项通过属性legend来进行设置，配置项中有一个enable属性表示是否开启图例功能，
仅当enable=true时才启用图例，并根据配置进行渲染。设置图例的代码片段如下：
代码片段：
new iChart.Column2D({
legend: {
enable : true
…
}
});
图例的对齐方式 4.13.2.
图例位置可以围绕在绘图区的周围。有两个属性定位其位置：
align：控制其水平方向的对齐方式。
valign：控制其垂直方向的对齐方式。
通过上面两个属性的组合可以配置出图例的对齐方式。其中{center/middle}这个组合是无效的。
以(align/valign)各种组合的位置如下：
17
设置图例在图表的右居中对齐的代码如下：
代码片段：
new iChart.Column2D({
legend: {
enable : true,
align : ‘right’,
valign: ‘middle’
}
});
图例的行列布局 4.13.3.
图例的行列布局一般为左对齐或者右对齐选用一列布局方式，而上对齐或者下对齐选用一行对齐方
式，当数据比较多的时候则进行多行多列布局形式。
设置图例一列布局方式的代码如下：
代码片段: 效果预览
new iChart.Column2D({
legend: {
enable : true,
row : ‘max’ ,
column: 1
}
});
设置图例一行布局方式的代码如下：
代码片段： 效果预览
new iChart.Column2D({
legend: {
enable : true,
row : 1,
column: ‘max’
}
});
图例的行高 4.13.4.
当你设置图例的文字之后可能会出现，多行重叠的问题，这时你可以通过属性line_height来设置
行高。以避免多行重叠。
设置图例行距为20px的代码如下：
代码片段：
new iChart.Column2D({
legend: {
enable : true
line_height: 20
}
});
18
图例符号的设置 4.13.5.
图例项的符号配置由以下几个属性决定：
sign：符号的形状。
sign_size：符号的大小。
sign_space：符号与文字的间距。
设置图例符号的代码如下：
代码片段：
new iChart.Column2D({
legend: {
enable : true,
sign : ‘round’,
sign_size : 10,
sign_space : 6
}
});
文字颜色与符号图形颜色一致 4.13.6.
配置项text_with_sign_color标识文字是否与符号颜色一致，默认为false。此配置要考虑你的符
号图形的颜色与背景色的颜色差，以免由于颜色相近造成文字模糊不清。
提示框 4.14.
开启提示框功能 4.14.1.
在图表中的空间有限，能表现的数据量也有限，这样,在一些特殊的地方,数据就可以以提示框的形
式展示出来。图例的配置项通过属性tip来进行设置，配置项中有一个enable属性表示是否开启提示框
功能，仅当enable=true时才启用提示框，并根据配置进行渲染。设置提示框的代码片段如下：
代码片段：
new iChart.Column2D({
tip : {
enable : true
…
}
});
固定位置与跟随位置 4.14.2.
提示框提供两种位置模式，固定位置则无论鼠标进入组件的位置，提示框则总是以固定的位置展示。
跟随位置模式下，提示框则会根据鼠标的位置变化而变化。
设置提示框的位置为跟随模式的代码如下:
代码片段：
new iChart.Column2D({
tip : {
enable : true
19
showType : ’follow’
}
});
提示框的渐入效果 4.14.3.
提示框的渐入渐出效果是由css3 的transition完成的，所以这个效果需要你的浏览器支持
transition。好在现在主流的浏览器都已经支持该属性了，所以你不必为这个问题担忧。关于此效果的
配置项如下：
animation：是否开启动画效果。
fade_duration：渐入渐出过程所用的时间。单位毫秒。
设置提示框渐入渐出的效果代码如下：
代码片段：
new iChart.Column2D({
tip : {
enable : true
animation : true,
fade_duration: 500
}
});
子配置项 4.15.
每个图表都是由不同形状的小组件构成，比如：饼图是由扇形构成。柱形图、条形图是由矩形构成。
折线图是由线段构成。每个子组件均是一个对象。ichartjs中设置子组件统一用sub_option配置项。而
每个配置项的具体内容，需要了解子组件的具体类型。建议对照各个组件具体的api进行配置。
设置子配置项的代码如下：
代码片段：
new iChart.Column2D({
sub_option: {
}
});
坐标系 4.16.
坐标轴是图表中必不可少的一部分，设计一个符合条件且又美观的坐标轴就需要熟悉每一个属性的
含义。coordinate是配置坐标轴的属性。是一个iChart.Coordinate2D/ iChart.Coordinate3D的对象。
其中除了Pie图没有坐标系之外。其他图表均有坐标系的配置项。
坐标轴线 4.16.1.
坐标系中有四个边，不同的图表中有着不同的意义和作用。组件中提供对四边轴的设置。axis是配
置四边轴线的属性。其子属性如下：
enable：是否设置其值。
20
width：轴四边的宽度，如果是数值，则代表四周均为此值，若为数组，则长度必须为4。其4个值
依次代表上-右-下-左。
设置轴线的代码如下：
代码片段：
new iChart.Column2D({
coordinate: {
axis: {
enable : true,
width: [0,0,2,2],
color : ’#333333’
}
}
});
值轴 4.16.2.
值轴是图表中很重要部分，为图表提供数值参考线。组件中配置值轴的是iChart.Scale对象，由属
性scale设置。其是一个数组类型或者对象类型的属性。一般来讲，一个值轴就满足需求了，但是，特
殊情况下，可能会有多个值轴。这样就配置数组类型的scale。其主要子属性如下：
position：刻度的位置。此值一般会由图表中属性scaleAlign覆盖。
start_scale：起始刻度值。
end_scale：结束刻度值。
scale_space：刻度间距值。
scale2grid：是否按照刻度画网格参考线。
scale_enable：是否显示刻度线。
scale_size：刻度线的大小(线条宽度)。
scale_width：刻度线的长度。
scale_color：刻度线颜色。
scaleAlign：刻度线对齐方式。
labels：自定义的刻度文本，一般作为非值轴的轴文本的设置。
设置刻度的代码如下：
代码片段：
new iChart.Column2D({
coordinate: {
scale: {
position:‘left‘,
start_scale:0,
end_scale:26,
scale_space:2
}
}
});
21
自定义刻度文本 4.16.3.
默认的刻度的文本都是数值，但是一般我们都要给单位。我们利用parseText事件返回自定义的刻
度文本。参数中可以设置自定义的位置。
设置自定义的刻度代码如下：
代码片段：
new iChart.Column2D({
coordinate: {
scale: {
position:‘left‘,
start_scale:0,
end_scale:26,
scale_space:2,
listeners:{
parseText:function(t,x,y){
return {text:t+" CM"}
}
}
}
}
});
有效坐标区域 4.16.4.
在特殊情况下我们的图表可能不是完全按照坐标轴的大小设置的。这样组件提供自定义有效坐标区
域的功能，主要有两个属性：
valid_width：设置有效的坐标区域宽度，必须要小于坐标宽度。
valid_height：设置有效的坐标区域高度，必须要小于坐标高度。
设置有效坐标区域的代码如下：
代码片段：
new iChart.Column2D({
coordinate: {
valid_width:600
}
});
网格 4.16.5.
网格是图表中很常用的元素，自定义的网格可以使你的图表看起来更和谐，组件网格通过属性grids
来设置。grids中有两个属性：
horizontal：水平网格配置项。
vertical：垂直网格配置项。
这两个属性的具体配置如下：
way：网格设置方式，可选值[share_alike，given_value]。
value：根据属性way值的不同有着不同的意义，当way取值share_alike时表示网格间隙的数量。
22
间隙的数量=网格线数量-1。当way取值given_value时表示网格间隙的距离。间隙的数量=坐标轴宽度/
网格间隙的距离。
设置有12个间隙(13个网格线)的网格代码如下：
代码片段：
new iChart.Column2D({
coordinate: {
grids: {
vertical:{
way:‘share_alike‘,
value:12
}
}
}
});
设置每个间隙为50px的网格代码如下：
代码片段：
new iChart.Column2D({
coordinate: {
grids: {
vertical:{
way:‘ given_value‘,
value:50
}
}
}
});
隔行变色 4.16.6.
隔行变色是常用的设计手法，有助于提升图表的可读性。组件提供便捷设置隔行变色的方式。默认
此配置项是开启的，但要注意只有配置了背景色的坐标系才会生效。
设置隔行变色的代码如下：
代码片段：
new iChart.Column2D({
coordinate: {
striped: true
}
});
自定义3D坐标系样式 4.16.7.
3D坐标系的各个面都可以自定义样式，通过指定背景颜色来达到个性化的配置。在配置项coordinate
中， wall_style是指定样式的子配置项，其可以指定长度为6的样式对象，每个对象中有2个属性：
color ：背景墙颜色
alpha ：背景墙透明度
23
设置坐标系各个背景的代码如下：
代码片段：
new iChart.Column3D({
coordinate: {
wall_style:[
{color : ‘#333333‘},
{color : ‘#b2b2d3‘},
{color : ‘#a6a6cb‘},
{color : ‘#333333‘},
{color : ‘#74749b‘},
{color : ‘#a6a6cb‘}
]
}
});
预览(为了展示效果，将柱形隐藏)：
其各个面与wall_style数组各个对象的对于关系如下图：
24
5. 图表篇
2D饼状图 5.1.
数据源格式 5.1.1.
饼状图的数据源格式为单一数据源型。其数据项中的value为数值。具体请参考：数据源的定义-单
值数据源
应用场景 5.1.2.
饼形图使用圆的扇形段来显示部分与整体的关系。饼形图对于突出显示比例非常有用。但是如果数
据项非常的多，我们建议你选择其他的图形。
起始角度 5.1.3.
默认第一个扇形的起始角度是3点钟方向，你可以通过配置项offset_angle来设置。正值代表顺时
针偏移，负值代表逆时针偏移。选择合适的角度能增加图表的可读性。
设置起始角度在12点钟方向的代码如下：
代码片段：
new iChart.Pie2D({
offset_angle:-90
});
半径的设置 5.1.4.
组件默认的半径会根据你图表的大小适应，但在特殊的时候，自己设置一个值是理想的选择。你可
以通过配置项radius来设置。选择合适大小的半径值能使图表看起来更协调。
设置半径为120px的代码如下：
代码片段：
new iChart.Pie2D({
radius:120
});
扇形属性设置 5.1.5.
饼状图的由扇形组件构成，饼图中的扇形区域由sub_option属性进行配置。扇形区域的详细的配置
项可以通过api查询。
为扇形区域设置属性的代码如下：
代码片段：
new iChart.Pie2D({
sub_option:{
//…
}
});
25
迷你Label 5.1.6.
在数据较少的情况下，为了满足视觉效果，我们会将延伸在饼状图外侧的label去掉，将Label直
接显示在饼图上。我们用配置项mini_label来开启这种表现的功能。有两个相关的配置项。
mini_label：是否开启迷你Label。
mini_label_threshold_angle：开启迷你Label的最小角度。此配置项防止，由于角度太小，扇
形区狭小，导致文本显示的问题。
开启迷你Label的代码如下：
代码片段： 效果预览
new iChart.Pie2D({
sub_option:{
mini_label : true,
mini_label_threshold_angle : 30 ,
label:{
fontsize:16,
color:‘#FFFFFF‘
}
}
});
事件 5.1.7.
饼状图的事件由其拥有的组件决定，饼图中有事件行为的组件有：扇形，图例，标签。所以设置事
件均在相应的配置属性中进行设置。具体事件行为请参考组件api。
为扇形区域设置单击事件的代码如下：
代码片段：
new iChart.Pie2D({
sub_option:{
listeners:{
click:function(c,e){
//…
}
}
}
});
分离间距 5.1.8.
设置分离间距后，饼图中扇形处于分离状态，有着特殊的视觉效果。配置项separate_angle的取值范围
为(0-90)，单位为角度。注意，此角度是间距的总和，默认为30。
设置分离间距的代码如下：
代码片段： 效果预览
26
new iChart.Pie2D({
separate_angle:60
});
3D饼状图 5.2.
3D饼状图除此了拥有2D饼状图的特征之外，还有其独有的设置。
数据源格式 5.2.1.
3D饼状图的数据源格式为单一数据源型。其数据项中的value为数值。具体请参考：数据源的定义-
单值数据源
Z-轴旋转 5.2.2.
3D饼状图在Z轴的旋转角度值，默认为45,有效值为(0-90)。
设置旋转角度值为30的代码如下：
代码片段：
new iChart.Pie3D({
zRotate:30
});
厚度 5.2.3.
3D饼状图的饼的厚度，默认为30。
设置厚度为50的代码如下：
代码片段：
new iChart.Pie3D({
zHeight:50
});
分离间距 5.2.4.
作用同Pie2D一致。
设置分离间距的代码如下：
代码片段： 效果预览
new iChart.Pie3D({
separate_angle:60
});
27
2D环形图 5.3.
数据源格式 5.3.1.
环形图的数据源格式为单一数据源型。其数据项中的value为数值。具体请参考：数据源的定义-单
值数据源
应用场景 5.3.2.
目前环形图使用与饼状图一致，目前不支持多数据源。只是在表现形式上是饼状图中间有一个空心
而已。但是可以利用这个空心，在上面写一些信息。
环形的宽度 5.3.3.
设置不同环形的宽度可以有不同的视觉效果，这里提供两种设置方式。
固定宽度：设置一个固定的宽度值，单位px。
百分比宽度：设置一个小数，按照半径的百分比设置环形宽度。
设置环形宽度为半径的30%的代码如下：
代码片段：
new iChart.Donut2D({
donutwidth:0.3
});
环形中心文字 5.3.4.
我们可以在环形中心来写文字，来表达一定的信息。利用center配置项来进行配置，此配置项是一个
iChart.Text的对象。
设置环形中心文本的代码如下：
代码片段： 效果预览
new iChart.Donut2D({
center:{
text:‘CORE\nSKILLS‘,
color:‘#6f6f6f‘
}
});
分离间距 5.3.5.
环形图中的分离间距比Pie2D和Pie3D更常用一些。
设置分离间距的代码如下：
代码片段： 效果预览
28
new iChart.Donut2D ({
separate_angle:60
});
条形图 5.4.
2D条形图 5.4.1.
数据源格式 5.4.2.
2D条形图的数据源格式为单一数据源型。其数据项中的value为数值。具体请参考：数据源的定义-
单值数据源
应用场景 5.4.3.
条形图用于展示具有类别关系，分布关系，时间关系的数据项。一般情况下均可用柱形图替换，但
在轴标签过长的情况下，条形图是一个很好的选择。
条形区域属性设置 5.4.4.
条形图的由矩形组件构成，条形图中的矩形区域由sub_option属性进行配置。矩形区域的详细的配
置项可以通过api查询。
为矩形区域设置属性的代码如下：
代码片段：
new iChart.Bar2D({
sub_option:{
//…
}
});
设置条形的高度 5.4.5.
默认情况下，组件会根据坐标系的高度来自动计算条形图中单个条形的高度值。你可以通过
barheight属性来进行自定义高度，当然你设置的值的总和不能超过坐标系最大的高度。
设置单个条形的高度代码片段如下：
代码片段：
new iChart.Bar2D({
barheight: 20
});
事件 5.4.6.
饼状图的事件由其拥有的组件决定，饼图中有事件行为的组件有：扇形，图例，标签。所以设置事
件均在相应的配置属性中进行设置。具体事件行为请参考组件api。
为扇形区域设置单击事件的代码如下：
29
代码片段：
new iChart.Bar2D({
sub_option:{
listeners:{
click:function(c,e){
//…
}
}
}
});
2D簇状条形图 5.5.
数据源格式 5.5.1.
2D簇状条形图的数据源格式为多值数据源型。其数据项中的value为数组。具体请参考：数据源的
定义-多值数据源
应用场景 5.5.2.
簇状条形图用于展示具有类别关系，分布关系，时间关系的数据项。簇状的特点是可以展现类别之
间相关性。
2D柱形图 5.6.
数据源格式 5.6.1.
2D柱形图的数据源格式为单一数据源型。其数据项中的value为数值。具体请参考：数据源的定义-
单值数据源
应用场景 5.6.2.
柱形图用于展示具有类别关系，分布关系，时间关系的数据项。一般情况下均可用条形图替换，但
在轴标签过长的情况下，条形图是一个很好的选择。
柱形区域属性设置 5.6.3.
柱形图的由矩形组件构成，柱形中的矩形区域由sub_option属性进行配置。矩形区域的详细的配置
项可以通过api查询。
为矩形区域设置属性的代码如下：
代码片段：
new iChart.Column2D({
sub_option:{
//…
}
});
设置柱形的宽度 5.6.4.
默认情况下，组件会根据坐标系的宽度来自动计算条形图中单个柱形的宽度值。你可以通过colwidth
30
属性来进行自定义宽度，当然你设置的值的总和不能超过坐标系最大的宽度。
设置单个柱形的宽度代码片段如下：
代码片段：
new iChart.Column2D({
barheight: 20
});
事件 5.6.5.
饼状图的事件由其拥有的组件决定，饼图中有事件行为的组件有：扇形，图例，标签。所以设置事
件均在相应的配置属性中进行设置。具体事件行为请参考组件api。
为扇形区域设置单击事件的代码如下：
代码片段：
new iChart.Column2D({
sub_option:{
listeners:{
click:function(c,e){
//…
}
}
}
});
2D簇状柱形图 5.7.
数据源格式 5.7.1.
2D柱形图的数据源格式为为多值数据源型。其数据项中的value为数组。具体请参考：数据源的定
义-多值数据源
应用场景 5.7.2.
簇状柱形图用于展示具有类别关系，分布关系，时间关系的数据项。簇状的特点是可以展示组之间
相关性与对比性。一般情况下均可用簇状条形图替换，但在轴标签过长的情况下，簇状条形图是一个很
好的选择。
3D柱形图 5.8.
数据源格式 5.8.1.
2D柱形图的数据源格式为单一数据源型。其数据项中的value为数值。具体请参考：数据源的定义-
单值数据源
应用场景 5.8.2.
3D柱形图继承自2D柱形图。拥有2D的应用特点。而3D的效果具有强烈的视觉效果。
3D旋转 5.8.3.
我们提供两个属性对3D效果进行旋转设置。可以根据自己的视觉需要设置其值。
31
xAngle:x轴方向旋转角度，默认60,有效值（0-90）
yAngle:y轴方向旋转角度，默认20,有效值（0-90）
3D簇状柱形图 5.9.
数据源格式 5.9.1.
2D柱形图的数据源格式为多值数据源型。其数据项中的value为数组。具体请参考：数据源的定义-
多值数据源
应用场景 5.9.2.
3D簇状柱形图继承自2D簇状柱形图。拥有2D的应用特点。而3D的效果具有强烈的视觉效果。
组内柱间距 5.9.3.
3D柱形图由于有3D的视觉效果，所以在空间上会有遮挡的现象，配置项group_fator可以配置一个分
组内的3D柱形之间的间距，默认为0.3。按照与其宽度的比例显示。
设置柱间距的代码如下：
代码片段：
new iChart. ColumnMulti3D ({
group_fator : 0.4
});
2D折线图 5.10.
数据源格式 5.10.1.
2D折线图的数据源格式为单一数据源型。其数据项中的value为数值。具体请参考：数据源的定义-
多值数据源
应用场景 5.10.2.
折线图用于展示具有随时间或者类别变化数据的趋势。
线段属性设置 5.10.3.
折线图的由线段组件构成，折线图中的线段由sub_option属性进行配置。线段的详细的配置项可以
通过api查询。
为线段设置属性的代码如下：
代码片段：
new iChart. LineBasic2D ({
sub_option:{
//…
}
});
设置线段数据点的大小与样式 5.10.4.
你可以设置适合自己图表风格的数据点大小与样式。属性如下：
point_size ：数据项点大小，默认为6。
32
hollow ：是否为空心点，默认为空心。
设置单个条形的高度代码片段如下：
代码片段：
new iChart. LineBasic2D ({
sub_option:{
point_size : 10,
hollow : false
}
});
平滑曲线 5.10.5.
你可以设置适合自己图表风格的数据点大小与样式。属性如下：
point_size ：数据项点大小，默认为6。
hollow ：是否为空心点，默认为空心。
设置直线图为平滑曲线的代码片段如下：
代码片段： 效果预览
new iChart. LineBasic2D ({
sub_option:{
smooth : true,
point_size:8
}
});
基本面积图 5.11.
数据源格式 5.11.1.
基本面积图的数据源格式为单一数据源型。其数据项中的value为数值。具体请参考：数据源的定
义-多值数据源
应用场景 5.11.2.
面积图与折线图类似，同样用于展示具有随时间或者类别变化数据的趋势。不过它们是在折线下的
区域中显示区域颜色。这些色彩丰富的可视显示能更清楚地区分数据。
设置区域的透明度 5.11.3.
有时我们会有多个面积图汇集在一个图表中，这样重合的地方可能会被前面的面积图遮挡住，通过
设置面积图的透明度可以解决这一问题。
为面积图设置透明度的代码如下：
代码片段：
new iChart.Area2D ({
area_opacity:0.2
});