### Supcan Chart组件

Chart组件实现了统计图功能，目前已完成了圆饼图、柱状图、折线图、曲线图、区域图(面积图)、雷达图，能满足大多数统计的需要。
下图是统计图的一些基本概念和约定的说明，使用Chart组件前需要了解清楚：
数据“系列”是一组完整的数据，可以在Chart组件中显示。对于数据表(Table)而言，一个系列相当于是一行记录，或者是垂直的一列数据。“系列”和“数据项”是可以互换的。
统计图中可以包含1个系列，也可以包含多个系列，上图中展示了包含了4个系列的情况。

1.创建实例

Supcan Chart 组件是通过插件/加载项创建的，可以直接调用 dynaload.js 中的函数创建:

    insertChart('AF', 'border=single; bordercolor=#4499ff; borderWidth=2; borderRound=23; backcolor=#fff5ea')

其中第二个参数即 “创建参数”，决定了如何在页面上展现 Supcan Chart，创建参数中可包含多个子串，子串间以 "；" 分隔。
创建参数的名值对的规范如下：

分类 | 子串名 | 含义 | 可用值 | 默认值
--- | --- | --- | --- | ---

主要

chart

统计图类型

0 或 pie | - 圆饼图 | 1 或 bar | - 柱状图
2 或 line | - 折线图 | 3 或 curve | - 曲线图
4 或 area | - 区域图 | 5 或 radar | - 雷达图

0

items | 统计图中最多能显示数据项数量 | 数值 注1：最多不得超过155; 注2：超出的部分、数值小的数据项将归并到“其它”数据项 | 28
textContent | 显示的文字内容 | 0 - 不显示, 1 - 仅数据项名称, 2 - 名称、百分比, 3 - 名称、数值, 也可以是表达式串 - 表达式中可以使用 name、data、percent 变量, 分别表示名称、数值、百分比, 例如: insertChart("AF", "border=none; textContent=name+': ' +data + '吨, 占总数的' + percent + '%'") 注：请注意里面的双引号、单引号 | 2
tip | tip内容 | none(或为空) - 禁止tip auto - 自动 表达式串 - 请参见 textContent 属性 | auto
textArrange | 文字位置 | 0 - 不显示, 1 - 外部且对齐, 2 - 外部, 3 - 内部 注：2、3仅用于圆饼图 | 2
Caption | 标题 | 文字 | (无)
titlePosition | 标题和系列名的位置 | 0 - 不显示, 2 - 上方, 8 - 底部 | 2
Colors | 统计图的颜色 | 以逗号分隔的颜色串, 用于自定义颜色 | (无) 自动产生
边界 | Border | 边界线风格 | none - 无边界, single - 单线条边界, 3d - 3D凹陷边界 | single
BorderWidth | 边界线粗细 | 像素数 | 1
BorderRound | 圆角边界的直径 | 像素数 | 0
BorderColor | 边界线颜色 | 颜色串 | 0
背景 | bgColor 或BackColor | 整个统计图的背景色 | 颜色串，或以逗号分隔的2个颜色串(垂直渐变) | 沿用页面上下文
BackImage | 统计图的背景图片 | 如下名值对，分号(;)分隔： src或url - 图片URL; alpha - 透明度(0-255); rotate - 旋转角度(0-360); arrange - 布局, 有tile(平铺) / stretch(伸展)等, 默认tile, 可参见Treelist XML文档规范中的<Properties>下的<background>. 例如：backImage='src=res/flag.jpg;alpha=100' | (无)
圆饼图 | PieTextColor | 圆饼图的文字颜色 | 颜色串, "auto" 表示自动, 采用和圆饼相近的颜色 | auto
PieBorderPercent | 圆饼图3D凸起(纽扣效果)大小 | 0到100的数字，0或100表示无纽扣效果，其中100表示完全2D(单一色) | 10
PieShadowPercent | 圆饼图阴影大小 | 0到100的数字，0表示无阴影 | 2
PieShadowAlpha | 圆饼图阴影透明度 | 0到255的数字, 数字越小则越淡 | 230
坐标类 | outlinePointDiameter | 数据点的小圆球的直径 | 像素数, 0表示不需要显示小圆球 备注：仅用于折线/曲线/区域图 | 10
dblClickSwitchAble | 鼠标双击当前系列行为 | true/false, 表示在多系列显示时，双击当前系列是否切换到仅显示本系列 | true
coordinateBackColor | 坐标区域背景色 | ARGB颜色串，或以逗号分隔的2个ARGB颜色串(垂直渐变) 注1: 所谓 ARGB 颜色，例如: "#10C0D0E0", 其中前2位( "10" )是 alpha(即透明度), 后6位( "C0D0E0" ) 是 RGB, 透明度的值的范围也和颜色一样, 是从0到255(对应到16进制就是00到FF). 半透明的颜色块好比是一层薄纱，叠加在上方，其透明度决定了颜色的浓淡 注2: 仅用于bar、line、curve、area | (无)
valueMask | 数值显示掩码 | 串，如"#,###.00", 如果不设置 valueMask, 格式将和传入的数据的格式保持一致 | (无)
valueMaskY | Y轴数值显示掩码 | 串，如"#,###.00" 注1: 仅用于bar、line、curve、area、radar | #,##0
valueStepY 或 stepValueY | Y轴坐标刻度步进值 | 数值，0表示由插件根据实际数据生成合适的值 注1: 仅用于bar、line、curve、area、radar 注2: 间距过密，该设置将失效 | 0
valueMaxY 或 maxValueY | 强制设定Y轴坐标最大值 | 数值，0表示由实际数据决定 注1: 仅用于bar、line、curve、area、radar 注2: 实际数据若超过该值，该设置将失效 | 0
valueMinY 或 minValueY | 强制设定Y轴坐标最小值 | 数值，0表示由实际数据决定 注1: 仅用于bar、line、curve、area、radar 注2: 实际数据若超过该值，该设置将失效 | 0
Overflow | 宽度不够导致数据项文字重叠的处理选项 | 0 - 垂直错落显示; 1 - 文字倾斜45度显示 注：用于柱状图、曲线折线图 | 0
ActiveSeries | 当前高亮的活动系列 | 系列名，或系列的顺序号(从0开始计数) | (无)
isDrawZero | 是否显示数值为0的线条 | 1 或 true, 全部显示; 0 或 false, 数值为零或为空的坐标处不绘制线条; 2 或 NotNull, 数值为空的坐标处不绘制线条; 注：仅用于折线/曲线/区域图 | true
LineThick | 折线/曲线的线条宽度 | 像素数, 0 到 12 | 1
BarImage | 柱状图的背景图案 | 如下名值对，分号(;)分隔： src或url - 图片URL; alpha - 透明度(0-255); rotate - 旋转角度(0-360); arrange - 布局, 有tile(平铺) / stretch(伸展)等, 默认tile, 可参见Treelist XML文档规范中的<Properties>下的<background>. 例如：barImage='src=res/flag.jpg;alpha=100' | (无)
isFillRadar | 是否以颜色填充雷达图 | true/false | true
其它 | isAnimate | 是否以动画启动 | true/false | true
hasMenu | 是否需要鼠标右键弹出菜单 | true/false | true
isUseContextFont | 是否采用页面上下文字体 | true/false | false
EventLog | 事件日志 | 文件名，建议后缀是txt, 不必带路径，系统将自动在 BC 目录下创建. 该文件能自动记录本组件实例的所有事件, 用于程序调试. 注：正式运行时请不要使用，因为频繁读写磁盘会导致性能下降. | 无
FuncLog | 函数调用日志 | 文件名，建议后缀是txt, 不必带路径，系统将自动在 BC 目录下创建. 该文件能自动记录本组件实例被调用的所有函数, 用于程序调试. 注：正式运行时请不要使用，因为频繁读写磁盘会导致性能下降. | 无
FuncParaChars | 函数日志中参数最大字数 | 数字，当启用函数日志时，函数的参数最多保留字数. | 128
FuncReturnChars | 函数日志中返回值最大字数 | 数字，当启用函数日志时，函数的返回值最多保留字数. | 0