android图表ichartjs(android 图表控件)

推荐整理分享android图表ichartjs(android 图表控件)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:android图表框架,Android图表绘制,Android图表中获取最高最低,Android图表动效,Android图表绘制,Android图表动效,Android图表中获取最高最低,Android图表绘制,内容如对您有帮助，希望把文章链接给更多的朋友！

android之ichartjs图表

1. pdf下载： 简介 what’s the ichartjs? 2.1.ichartjs 是一款基于HTML5的图形库。使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形。 ichartjs致力于为WEB应用提供简单、直观、可交互的体验级图表组件。是WEB图表展示方面的解决方案 。如果你正在开发HTML5的应用，ichartjs正好适合你。 ichartjs目前支持饼图、折线图、区域图、柱形图、条形图。ichartjs是基于Apache License 2.0协议的开源项目。于年月日发布了正式的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 : ,color:'#a'}, {name : 'L',value : ,color:'#a'}, {name : 'O',value : ,color:'#af8f'}, {name : 'W',value : ,color:'#cc'}, {name : 'O',value : ,color:'#af8f'}, {name : 'R',value : ,color:'#9f'}, {name : 'L',value : ,color:'#a'}, {name : 'D',value : 4,color:'#6fa5'} ]; $(function(){ new iChart.Column2D({ render : 'canvasDiv', //渲染目标 data: data,//绑定数据 title :{ text:'Hello World's Height In Alphabet'}, //设置标题 width : , //图表宽度 height : , //图表高度 coordinate:{ //设置坐标系 scale:[{ position:'left', //左边&#;轴 start_scale:0, //起始刻度&#; end_scale:, //结束刻度&#; 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 : ,color:'#a5c2d5'}, {name : ' IE7',value : ,color:'#cbab4f'}, {name : ' IE8',value : ,color:'#a'}, {name : ' IE9',value : ,color:'#9f'}, {name : ' IE',value : ,color:'#af8f'} ]; 多&#;数据源 4.2.2.多&#;数据源拥有两个与数据相关的属性，data, labels。与单一的数据源相比多了一个labels属性，并且data的value是数组的。我们没有将这两个属性整合到一起，因为你一旦理解这两个属性的作用。写起来是相当的容易的。 data的&#;式范例： 代码片段： var data = [ { name : 'DPSA', value:[,,,,,], color:'#1f7e' }, { name : 'DPSB', value:[,,,,,], color:'#2b7f' } ]; labels的&#;式范例： 代码片段： var labels= ["一月","二月","三月","四月","五月","六月"]; 可见data的value的长度是要与labels一致的，这说明labels是value对应的标签项。 大小、内边距及边框 4.3.在创建图表时，设置图表宽度为px,高度为px的代码片段如下： 代码片段： new iChart.Column2D({ width : , height : }); 如果在手客户端需要自适应屏幕，则设置fit:true即可。 设置图表的内边距 4.3.1.在创建图表时，设置图表内边距为px的代码片段如下： 代码片段： new iChart.Column2D({ padding : }); 图表的边框 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 : , offsety : }); 阴影效果 4.5.阴影效果是图表组件共有的属性，但一般我们主要对图表进行设置。设置阴影主要有以下几个属性： shadow：是否启用阴影效果。 shadow_blur：阴影效果的模糊&#;。 shadow_color:阴影颜色。 shadow_offsetx:阴影x轴偏移量，正数向右偏移，负数向左偏移。 shadow_offsety: 阴影y轴偏移量，正数向下偏移，负数向上偏移。 启用图表的阴影效果或多或少会影响图表的渲染时间，当你对渲染速度没有苛刻的要求的时候请放心使用。 在创建图表时，设置图表阴影的代码片段如下： 代码片段： new iChart.Column2D({ shadow : true, shadow_ blur : 4, shadow_ color : ‘#’, shadow_offsetx : 2, shadow_offsety : 2 }); 背景色与渐变 4.6. 设置背景色 4.6.1.背景色是一个基本的属性，图表中的组件都拥有这个属性，图表中的颜色属性支持：rgb,rgba, 颜色名称的颜色(如:gray)和十六进制&#;的颜色（比如 #ff）。 在创建图表时，设置图表背景色的代码片段如下： 代码片段： new iChart.Column2D({ background_color : ‘#EFEFEF’ }); 设置渐变 4.6.2.渐变是一个很常见的配色技巧，组件中也提供了便捷设置渐变的属性： gradient ：是否开启渐变，默认false。 color_factor :颜色渐变因子。取&#;越大渐变效果越大，颜色变化是基于背景颜色的。取&#;范围{0. - 0.5}.默认 0.。 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。 在创建图表时，设置图表标题字体的代码片段如下： 代码片段： new iChart.Column2D({ title: { text : ‘年2月份市场浏览器占用情况’ , font: ‘sans-serif’, fontsize:, fontweight:, color: ‘#ffffff’ } }); 文字旋转 4.8.调整文字的方向在文本过长，数据多，空间狭小的情况下使用。 在创建图表时，设置x轴label的文字向下度的代码片段如下： 代码片段： new iChart.Column2D({ label:{ rotate:-, textBaseline:'middle', textAlign:'right' } }); 代码含义为，以右侧中部为原点，逆时针方向旋转度。 图表的标题 4.9.标题是图表必不可少的一部分，我们提供主标题与副标题。并且副标题必须在主标题存在的情况下而存在。图表的标题与副标题设置方式一致。其主要配置属性如下： title : 主标题配置项，你可以提供字符串配置项或者对象配置项，若给出的是字符串，则会用默认的字体颜色等配置渲染标题，若给出的是一个iChart.Text对象的配置项，则用对象配置项进行渲染。 title_align : 标题的对齐方式。 subtitle : 副标题配置项，与主标题一致，你也可以提供字符串配置项或者对象配置项。 在创建图表时，设置图表标题的代码片段如下： 代码片段： new iChart.Column2D({ title: ‘年2月份市场浏览器占用情况’, sub title : ‘IE依然领先于其他浏览器’, title_algin : ’ center’ }); 当对标题进行左对齐或者右对齐时，可能达不到你想要的效果，这时通过偏移量来对其进行调整。代码片段如下： 代码片段： new iChart.Column2D({ title: { text : ‘年2月份市场浏览器占用情况’ , offsetx: }, sub title: { text : ‘IE依然领先于其他浏览器’ , offsetx: }, title_algin : ’ left’ }); 图表的脚注 4..脚注有时候会给你的图表带来意想不到的效果。是对图表信息的一个注释。一般会将数据的来源以脚注的方式展示出来。其主要配置属性如下： footnote : 脚注配置项，你可以提供字符串配置项或者对象配置项，若给出的是字符串，则会用默认的字体颜色等配置渲染标题，若给出的是一个iChart.Text对象的配置项，则用对象配置项进行渲染。。 footnote _align : 脚注的对齐方式。 脚注的设置方式与标题一致。请参考 图表的标题。 label配置项的含义 4..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..动画效果往往给人带来意想不到的效果，组件也提供一些简单的过渡动画，其属性如下： animation：是否开启过渡动画效果。 animation_timing_function：过渡动画效果函数。 duration_animation_duration：过渡动画过程所用的时间，单位毫秒。 渲染动画对于手持客户端来说，目前由于硬件的原因运行效果还不够流畅，时间上会有一些延迟。但是对于PC来讲则没有任何问题。同时注意开启阴影效果会对动画造成一定的延迟。 在创建图表时，设置图表动画的代码片段如下： 代码片段： new iChart.Column2D({ animation: true }); 图例 4.. 开启图例功能 4..1.图例的配置项通过属性legend来进行设置，配置项中有一个enable属性表示是否开启图例功能，仅当enable=true时才启用图例，并根据配置进行渲染。设置图例的代码片段如下： 代码片段： new iChart.Column2D({ legend: { enable : true … } }); 图例的对齐方式 4..2.图例位置可以围绕在绘图区的周围。有两个属性定位其位置： align：控制其水平方向的对齐方式。 valign：控制其垂直方向的对齐方式。 通过上面两个属性的组合可以配置出图例的对齐方式。其中{center/middle}这个组合是无效的。 以(align/valign)各种组合的位置如下： 设置图例在图表的右居中对齐的代码如下： 代码片段： new iChart.Column2D({ legend: { enable : true, align : ‘right’, valign: ‘middle’ } }); 图例的行列布局 4..3.图例的行列布局一般为左对齐或者右对齐选用一列布局方式，而上对齐或者下对齐选用一行对齐方式，当数据比较多的时候则进行多行多列布局形式。 设置图例一列布局方式的代码如下： 代码片段: 效果预览 new iChart.Column2D({ legend: { enable : true, row : ‘max’ , column: 1 } }); 设置图例一行布局方式的代码如下： 代码片段： 效果预览 new iChart.Column2D({ legend: { enable : true, row : 1, column: ‘max’ } }); 图例的行高 4..4.当你设置图例的文字之后可能会出现，多行重叠的问题，这时你可以通过属性line_height来设置行高。以避免多行重叠。 设置图例行距为px的代码如下： 代码片段： new iChart.Column2D({ legend: { enable : true line_height: } }); 图例符号的设置 4..5.图例项的符号配置由以下几个属性决定： sign：符号的形状。 sign_size：符号的大小。 sign_space：符号与文字的间距。 设置图例符号的代码如下： 代码片段： new iChart.Column2D({ legend: { enable : true, sign : ‘round’, sign_size : , sign_space : 6 } }); 文字颜色与符号图形颜色一致 4..6.配置项text_with_sign_color标识文字是否与符号颜色一致，默认为false。此配置要考虑你的符号图形的颜色与背景色的颜色差，以免由于颜色相近造成文字模糊不清。 提示框 4.. 开启提示框功能 4..1.在图表中的空间有限，能表现的数据量也有限，这样,在一些特殊的地方,数据就可以以提示框的形式展示出来。图例的配置项通过属性tip来进行设置，配置项中有一个enable属性表示是否开启提示框功能，仅当enable=true时才启用提示框，并根据配置进行渲染。设置提示框的代码片段如下： 代码片段： new iChart.Column2D({ tip : { enable : true … } }); 固定位置与跟随位置 4..2.提示框提供两种位置模式，固定位置则无论鼠标进入组件的位置，提示框则总是以固定的位置展示。 跟随位置模式下，提示框则会根据鼠标的位置变化而变化。 设置提示框的位置为跟随模式的代码如下: 代码片段： new iChart.Column2D({ tip : { enable : true showType : ’follow’ } }); 提示框的渐入效果 4..3.提示框的渐入渐出效果是由css3 的transition完成的，所以这个效果需要你的浏览器支持transition。好在现在主流的浏览器都已经支持该属性了，所以你不必为这个问题担忧。关于此效果的配置项如下： animation：是否开启动画效果。 fade_duration：渐入渐出过程所用的时间。单位毫秒。 设置提示框渐入渐出的效果代码如下： 代码片段： new iChart.Column2D({ tip : { enable : true animation : true, fade_duration: } }); 子配置项 4..每个图表都是由不同形状的小组件构成，比如：饼图是由扇形构成。柱形图、条形图是由矩形构成。 折线图是由线段构成。每个子组件均是一个对象。ichartjs中设置子组件统一用sub_option配置项。而每个配置项的具体内容，需要了解子组件的具体类型。建议对照各个组件具体的api进行配置。 设置子配置项的代码如下： 代码片段： new iChart.Column2D({ sub_option: { } }); 坐标系 4..坐标轴是图表中必不可少的一部分，设计一个符合条件且又美观的坐标轴就需要熟悉每一个属性的含义。coordinate是配置坐标轴的属性。是一个iChart.Coordinate2D/ iChart.Coordinate3D的对象。其中除了Pie图没有坐标系之外。其他图表均有坐标系的配置项。 坐标轴线 4..1.坐标系中有四个边，不同的图表中有着不同的意义和作用。组件中提供对四边轴的设置。axis是配置四边轴线的属性。其子属性如下： enable：是否设置其&#;。 width：轴四边的宽度，如果是数&#;，则代表四周均为此&#;，若为数组，则长度必须为4。其4个&#;依次代表上-右-下-左。 设置轴线的代码如下： 代码片段： new iChart.Column2D({ coordinate: { axis: { enable : true, width: [0,0,2,2], color : ’#’ } } }); &#;轴 4..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:, scale_space:2 } } }); 自定义刻度文本 4..3.默认的刻度的文本都是数&#;，但是一般我们都要给单位。我们利用parseText事件返回自定义的刻度文本。参数中可以设置自定义的位置。 设置自定义的刻度代码如下： 代码片段： new iChart.Column2D({ coordinate: { scale: { position:'left', start_scale:0, end_scale:, scale_space:2, listeners:{ parseText:function(t,x,y){ return {text:t&#;" CM"} } } } } }); 有效坐标区域 4..4.在特殊情况下我们的图表可能不是完全按照坐标轴的大小设置的。这样组件提供自定义有效坐标区域的功能，主要有两个属性： valid_width：设置有效的坐标区域宽度，必须要小于坐标宽度。 valid_height：设置有效的坐标区域高度，必须要小于坐标高度。 设置有效坐标区域的代码如下： 代码片段： new iChart.Column2D({ coordinate: { valid_width: } }); 网&#; 4..5.网&#;是图表中很常用的元素，自定义的网&#;可以使你的图表看起来更和谐，组件网&#;通过属性grids来设置。grids中有两个属性： horizontal：水平网&#;配置项。 vertical：垂直网&#;配置项。 这两个属性的具体配置如下： way：网&#;设置方式，可选&#;[share_alike，given_value]。 value：根据属性way&#;的不同有着不同的意义，当way取&#;share_alike时表示网&#;间隙的数量。 间隙的数量=网&#;线数量-1。当way取&#;given_value时表示网&#;间隙的距离。间隙的数量=坐标轴宽度/网&#;间隙的距离。 设置有个间隙(个网&#;线)的网&#;代码如下： 代码片段： new iChart.Column2D({ coordinate: { grids: { vertical:{ way:'share_alike', value: } } } }); 设置每个间隙为px的网&#;代码如下： 代码片段： new iChart.Column2D({ coordinate: { grids: { vertical:{ way:' given_value', value: } } } }); 隔行变色 4..6.隔行变色是常用的设计手法，有助于提升图表的可读性。组件提供便捷设置隔行变色的方式。默认此配置项是开启的，但要注意只有配置了背景色的坐标系才会生效。 设置隔行变色的代码如下： 代码片段： new iChart.Column2D({ coordinate: { striped: true } }); 自定义3D坐标系样式 4..7.3D坐标系的各个面都可以自定义样式，通过指定背景颜色来达到个性化的配置。在配置项coordinate中， wall_style是指定样式的子配置项，其可以指定长度为6的样式对象，每个对象中有2个属性： color ：背景墙颜色 alpha ：背景墙透明度 设置坐标系各个背景的代码如下： 代码片段： new iChart.Column3D({ coordinate: { wall_style:[ {color : '#'}, {color : '#b2b2d3'}, {color : '#a6a6cb'}, {color : '#'}, {color : '#b'}, {color : '#a6a6cb'} ] } }); 预览(为了展示效果，将柱形隐藏)： 其各个面与wall_style数组各个对象的对于关系如下图： 5. 图表篇 2D饼状图 5.1. 数据源&#;式 5.1.1.饼状图的数据源&#;式为单一数据源型。其数据项中的value为数&#;。具体请参考：数据源的定义-单&#;数据源 应用场景 5.1.2.饼形图使用圆的扇形段来显示部分与整体的关系。饼形图对于突出显示比例非常有用。但是如果数据项非常的多，我们建议你选择其他的图形。 起始角度 5.1.3.默认第一个扇形的起始角度是3点钟方向，你可以通过配置项offset_angle来设置。正&#;代表顺时针偏移，负&#;代表逆时针偏移。选择合适的角度能增加图表的可读性。 设置起始角度在点钟方向的代码如下： 代码片段： new iChart.Pie2D({ offset_angle:- }); 半径的设置 5.1.4.组件默认的半径会根据你图表的大小适应，但在特殊的时候，自己设置一个&#;是理想的选择。你可以通过配置项radius来设置。选择合适大小的半径&#;能使图表看起来更协调。 设置半径为px的代码如下： 代码片段： new iChart.Pie2D({ radius: }); 扇形属性设置 5.1.5.饼状图的由扇形组件构成，饼图中的扇形区域由sub_option属性进行配置。扇形区域的详细的配置项可以通过api查询。 为扇形区域设置属性的代码如下： 代码片段： new iChart.Pie2D({ sub_option:{ //… } }); 迷你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 : , label:{ fontsize:, color:'#FFFFFF' } } }); 事件 5.1.7.饼状图的事件由其拥有的组件决定，饼图中有事件行为的组件有：扇形，图例，标签。所以设置事件均在相应的配置属性中进行设置。具体事件行为请参考组件api。 为扇形区域设置单击事件的代码如下： 代码片段： new iChart.Pie2D({ sub_option:{ listeners:{ click:function(c,e){ //… } } } }); 分离间距 5.1.8.设置分离间距后，饼图中扇形处于分离状态，有着特殊的视觉效果。配置项separate_angle的取&#;范围为(0-)，单位为角度。注意，此角度是间距的总和，默认为。 设置分离间距的代码如下： 代码片段： 效果预览 new iChart.Pie2D({ separate_angle: }); 3D饼状图 5.2.3D饼状图除此了拥有2D饼状图的特征之外，还有其独有的设置。 数据源&#;式 5.2.1.3D饼状图的数据源&#;式为单一数据源型。其数据项中的value为数&#;。具体请参考：数据源的定义-单&#;数据源 Z-轴旋转 5.2.2.3D饼状图在Z轴的旋转角度&#;，默认为,有效&#;为(0-)。 设置旋转角度&#;为的代码如下： 代码片段： new iChart.Pie3D({ zRotate: }); 厚度 5.2.3.3D饼状图的饼的厚度，默认为。 设置厚度为的代码如下： 代码片段： new iChart.Pie3D({ zHeight: }); 分离间距 5.2.4.作用同Pie2D一致。 设置分离间距的代码如下： 代码片段： 效果预览 new iChart.Pie3D({ separate_angle: }); 2D环形图 5.3. 数据源&#;式 5.3.1.环形图的数据源&#;式为单一数据源型。其数据项中的value为数&#;。具体请参考：数据源的定义-单&#;数据源 应用场景 5.3.2.目前环形图使用与饼状图一致，目前不支持多数据源。只是在表现形式上是饼状图中间有一个空心而已。但是可以利用这个空心，在上面写一些信息。 环形的宽度 5.3.3.设置不同环形的宽度可以有不同的视觉效果，这里提供两种设置方式。 固定宽度：设置一个固定的宽度&#;，单位px。 百分比宽度：设置一个小数，按照半径的百分比设置环形宽度。 设置环形宽度为半径的%的代码如下： 代码片段： new iChart.Donut2D({ donutwidth:0.3 }); 环形中心文字 5.3.4.我们可以在环形中心来写文字，来表达一定的信息。利用center配置项来进行配置，此配置项是一个iChart.Text的对象。 设置环形中心文本的代码如下： 代码片段： 效果预览 new iChart.Donut2D({ center:{ text:'COREnSKILLS', color:'#6f6f6f' } }); 分离间距 5.3.5.环形图中的分离间距比Pie2D和Pie3D更常用一些。 设置分离间距的代码如下： 代码片段： 效果预览 new iChart.Donut2D ({ separate_angle: }); 条形图 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: }); 事件 5.4.6.饼状图的事件由其拥有的组件决定，饼图中有事件行为的组件有：扇形，图例，标签。所以设置事件均在相应的配置属性中进行设置。具体事件行为请参考组件api。 为扇形区域设置单击事件的代码如下： 代码片段： 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 属性来进行自定义宽度，当然你设置的&#;的总和不能超过坐标系最大的宽度。 设置单个柱形的宽度代码片段如下： 代码片段： new iChart.Column2D({ barheight: }); 事件 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效果进行旋转设置。可以根据自己的视觉需要设置其&#;。 xAngle:x轴方向旋转角度，默认,有效&#;（0-） yAngle:y轴方向旋转角度，默认,有效&#;（0-） 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.. 数据源&#;式 5..1.2D折线图的数据源&#;式为单一数据源型。其数据项中的value为数&#;。具体请参考：数据源的定义-多&#;数据源 应用场景 5..2.折线图用于展示具有随时间或者类别变化数据的趋势。 线段属性设置 5..3.折线图的由线段组件构成，折线图中的线段由sub_option属性进行配置。线段的详细的配置项可以通过api查询。 为线段设置属性的代码如下： 代码片段： new iChart. LineBasic2D ({ sub_option:{ //… } }); 设置线段数据点的大小与样式 5..4.你可以设置适合自己图表风&#;的数据点大小与样式。属性如下： point_size ：数据项点大小，默认为6。 hollow ：是否为空心点，默认为空心。 设置单个条形的高度代码片段如下： 代码片段： new iChart. LineBasic2D ({ sub_option:{ point_size : , hollow : false } }); 平滑曲线 5..5.你可以设置适合自己图表风&#;的数据点大小与样式。属性如下： point_size ：数据项点大小，默认为6。 hollow ：是否为空心点，默认为空心。 设置直线图为平滑曲线的代码片段如下： 代码片段： 效果预览 new iChart. LineBasic2D ({ sub_option:{ smooth : true, point_size:8 } }); 基本面积图 5.. 数据源&#;式 5..1.基本面积图的数据源&#;式为单一数据源型。其数据项中的value为数&#;。具体请参考：数据源的定义-多&#;数据源 应用场景 5..2.面积图与折线图类&#;，同样用于展示具有随时间或者类别变化数据的趋势。不过它们是在折线下的区域中显示区域颜色。这些色彩丰富的可视显示能更清楚地区分数据。 设置区域的透明度 5..3.有时我们会有多个面积图汇集在一个图表中，这样重合的地方可能会被前面的面积图遮挡住，通过设置面积图的透明度可以解决这一问题。 为面积图设置透明度的代码如下： 代码片段： new iChart.Area2D ({ area_opacity:0.2 });

JDK/ADT Android开发环境搭建 1.1JDK环境搭建安装Windows7（如果已有，可以跳过）去

简单的横向ListView实现(version 2.0) 版本1.0的横向listView核心只是简单的用layout来进行横向的布局，并没有实现基本的滚动操作，整个屏幕智能显示固定的数目的Item，且Adapter中剩余的View虽

border-radius在Android下的几个BUG 一、Android2.3自带浏览器不支持%通常我们实现一个正圆只需要border-radius:%即可，大致代码如下：.foo{width:px;height:px;border-radius:%;border:1pxsolidblue;}然