ichartjs入门实用教程

需积分: 16 61 浏览量更新于2023-03-16 评论收藏 1.6MB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

taylor@ichartjs.com

ichartjs open source technology team

2013/3/12

http://www.ichartjs.com

ichartjs 入门实用教程

本教程适用于 v1.1

1. 前言 ..................................................................................................................................................................... 5

文档说明 ..................................................................................................................................................... 5 1.1.

文档约定 ..................................................................................................................................................... 5 1.2.

图表术语 ..................................................................................................................................................... 5 1.3.

感谢语 ......................................................................................................................................................... 6 1.4.

2. 简介 ..................................................................................................................................................................... 7

what’s the ichartjs? ..................................................................................................................................... 7 2.1.

特点 ............................................................................................................................................................. 7 2.2.

应用场景 ..................................................................................................................................................... 7 2.3.

3. 部署与结构 ......................................................................................................................................................... 8

一步部署 ..................................................................................................................................................... 8 3.1.

组件结构分析 ............................................................................................................................................. 8 3.2.

快速入门向导 ............................................................................................................................................. 9 3.3.

说明 ................................................................................................................................................ 9 3.3.1.

预览 ................................................................................................................................................ 9 3.3.2.

代码 ................................................................................................................................................ 9 3.3.3.

4. 基础篇 ............................................................................................................................................................... 11

$符号的含义 ............................................................................................................................................. 11 4.1.

数据格式的定义 ....................................................................................................................................... 11 4.2.

单一数据源 .................................................................................................................................. 11 4.2.1.

多值数据源 .................................................................................................................................. 11 4.2.2.

大小、内边距及边框 ............................................................................................................................... 12

4.3.

设置图表的大小 .......................................................................................................................... 12 4.3.1.

设置图表的内边距 ...................................................................................................................... 12 4.3.2.

图表的边框 .................................................................................................................................. 12 4.3.3.

对齐方式与偏移量 ................................................................................................................................... 13 4.4.

设置组件的大小 .......................................................................................................................... 13 4.4.1.

设置图表的对齐方式 .................................................................................................................. 13 4.4.2.

设置图表的偏移量 ...................................................................................................................... 13 4.4.3.

阴影效果 ................................................................................................................................................... 13 4.5.

背景色与渐变 ........................................................................................................................................... 14 4.6.

设置背景色 .................................................................................................................................. 14 4.6.1.

设置渐变 ...................................................................................................................................... 14 4.6.2.

字体样式 ................................................................................................................................................... 14 4.7.

文字旋转 ................................................................................................................................................... 15 4.8.

图表的标题 ............................................................................................................................................... 15 4.9.

图表的脚注 ............................................................................................................................................... 16 4.10.

label 配置项的含义 .................................................................................................................................. 16 4.11.

过渡动画效果 ........................................................................................................................................... 16 4.12.

图例 ........................................................................................................................................................... 17 4.13.

开启图例功能 .............................................................................................................................. 17 4.13.1.

图例的对齐方式 .......................................................................................................................... 17 4.13.2.

图例的行列布局 .......................................................................................................................... 18 4.13.3.

图例的行高 .................................................................................................................................. 18 4.13.4.

图例符号的设置 .......................................................................................................................... 19 4.13.5.

文字颜色与符号图形颜色一致 .................................................................................................. 19 4.13.6.

提示框 ....................................................................................................................................................... 19 4.14.

开启提示框功能 .......................................................................................................................... 19 4.14.1.

固定位置与跟随位置 .................................................................................................................. 19 4.14.2.

提示框的渐入效果 ...................................................................................................................... 20 4.14.3.

子配置项 ................................................................................................................................................... 20 4.15.

坐标系 ....................................................................................................................................................... 20 4.16.

坐标系大小 .................................................................................................................................. 20 4.16.1.

坐标轴线 ...................................................................................................................................... 21 4.16.2.

值轴 .............................................................................................................................................. 21 4.16.3.

自定义刻度文本 .......................................................................................................................... 22 4.16.4.

有效坐标区域 .............................................................................................................................. 22 4.16.5.

网格 .............................................................................................................................................. 23 4.16.6.

隔行变色 ...................................................................................................................................... 23 4.16.7.

自定义 3D 坐标系样式 ............................................................................................................... 24 4.16.8.

5. 图表篇 ............................................................................................................................................................... 26

2D 饼状图.................................................................................................................................................. 26 5.1.

数据源格式 .................................................................................................................................. 26 5.1.1.

应用场景 ...................................................................................................................................... 26 5.1.2.

起始角度 ...................................................................................................................................... 26 5.1.3.

半径的设置 .................................................................................................................................. 26 5.1.4.

扇形属性设置 .............................................................................................................................. 26 5.1.5.

迷你 Label .................................................................................................................................... 27 5.1.6.

事件 .............................................................................................................................................. 27 5.1.7.

分离间距 ...................................................................................................................................... 27 5.1.8.

3D 饼状图.................................................................................................................................................. 28 5.2.

数据源格式 .................................................................................................................................. 28 5.2.1.

应用场景 ...................................................................................................................................... 28 5.2.2.

Z-轴旋转....................................................................................................................................... 28 5.2.3.

厚度 .............................................................................................................................................. 28 5.2.4.

分离间距 ...................................................................................................................................... 28 5.2.5.

2D 环形图.................................................................................................................................................. 29 5.3.

数据源格式 .................................................................................................................................. 29 5.3.1.

应用场景 ...................................................................................................................................... 29 5.3.2.

环形的宽度 .................................................................................................................................. 29 5.3.3.

环形中心文字 .............................................................................................................................. 29 5.3.4.

分离间距 ...................................................................................................................................... 29 5.3.5.

条形图 ....................................................................................................................................................... 30 5.4.

2D 条形图 .................................................................................................................................... 30 5.4.1.

数据源格式 .................................................................................................................................. 30 5.4.2.

应用场景 ...................................................................................................................................... 30 5.4.3.

条形区域属性设置 ...................................................................................................................... 30 5.4.4.

设置条形的高度 .......................................................................................................................... 30 5.4.5.

事件 .............................................................................................................................................. 30 5.4.6.

2D 簇状条形图 .......................................................................................................................................... 31 5.5.

数据源格式 .................................................................................................................................. 31 5.5.1.

应用场景 ...................................................................................................................................... 31 5.5.2.

2D 柱形图.................................................................................................................................................. 31 5.6.

数据源格式 .................................................................................................................................. 31 5.6.1.

应用场景 ...................................................................................................................................... 31 5.6.2.

柱形区域属性设置 ...................................................................................................................... 31 5.6.3.

设置柱形的宽度 .......................................................................................................................... 32 5.6.4.

事件 .............................................................................................................................................. 32 5.6.5.

2D 簇状柱形图 .......................................................................................................................................... 32 5.7.

数据源格式 .................................................................................................................................. 32 5.7.1.

应用场景 ...................................................................................................................................... 32 5.7.2.

2D(百分比)堆积柱形图(news) ................................................................................................................. 32 5.8.

数据源格式 .................................................................................................................................. 32 5.8.1.

应用场景 ...................................................................................................................................... 32 5.8.2.

应用为百分比堆积图 .................................................................................................................. 33 5.8.3.

3D 柱形图.................................................................................................................................................. 33 5.9.

数据源格式 .................................................................................................................................. 33 5.9.1.

应用场景 ...................................................................................................................................... 33 5.9.2.

3D 旋转 ........................................................................................................................................ 33 5.9.3.

3D 簇状柱形图 .......................................................................................................................................... 33 5.10.

数据源格式 .................................................................................................................................. 33 5.10.1.

应用场景 ...................................................................................................................................... 33 5.10.2.

组内柱间距 .................................................................................................................................. 33 5.10.3.

3D(百分比)堆积柱形图(news) ................................................................................................................. 34 5.11.

数据源格式 .................................................................................................................................. 34 5.11.1.

应用场景 ...................................................................................................................................... 34 5.11.2.

应用为百分比堆积图 .................................................................................................................. 34 5.11.3.

2D 折线图.................................................................................................................................................. 34 5.12.

数据源格式 .................................................................................................................................. 34 5.12.1.

应用场景 ...................................................................................................................................... 34 5.12.2.

线段属性设置 .............................................................................................................................. 34 5.12.3.

设置线段数据点的大小与样式 .................................................................................................. 34 5.12.4.

平滑曲线 ...................................................................................................................................... 35 5.12.5.

2D 面积图.................................................................................................................................................. 35 5.13.

数据源格式 .................................................................................................................................. 35 5.13.1.

应用场景 ...................................................................................................................................... 35 5.13.2.

设置区域的透明度 ...................................................................................................................... 35 5.13.3.

6. 高级图表组件 ................................................................................................................................................... 36

自定义图表组件 ....................................................................................................................................... 36 6.1.