android图表ichartjs

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
});

更多相关文章

随机推荐