### Supcan Chart组件

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

Supcan Chart组件是通过插件/加载项创建的，所以应该用使用指南 \ 页面语法中叙述的插件/加载项的页面创建语法创建， <Object>中的某几个Param参数规则如下:

    <Object ...(略)>
    <Param name="CtlName" value="BCV1.Chart">　　//固定
    <Param name="ZipUrl" value="BCV1.bin">	　　//也可以是绝对URL
    <Param name="CtlPara" value="border=single; bordercolor=#4499ff; borderWidth=2; borderRound=23; backcolor=#fff5ea">	//例子
    ...

如果页面是直接调用dynaload.js，那么可能就是这样:

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

可见参数串中包含了多个子串，子串间以 ";" 分隔，子串是以"name=value1,value2,..."方式书写的。
子串的名值对的规范如下：

子串名 | 含义 | 可用值 | 默认值
chart | 统计图类型 | 0 或 pie - 圆饼图 1 或 bar - 柱状图 2 或 line - 折线图 3 或 curve - 曲线图 4 或 area - 区域图 5 或 radar - 雷达图 | 0
isUseContextFont | 是否采用页面上下文字体 | true/false | false
items | 统计图中最多能显示数据项数量，最多不得超过155. 注：超出部分、且数值小的数据项将归并到“其它”数据项. | 数值 | 28
textContent | 显示的文字内容 | 0 - 不显示 1 - 仅数据项名称 2 - 名称、百分比 3 - 名称、数值 | 2
textArrange | 文字位置 | 0 - 不显示 1 - 外部且对齐 2 - 外部 3 - 内部 备注：2、3仅用于圆饼图 | 2
Caption | 标题 | 文字 | (无)
titlePosition | 标题和系列名的位置 | 0 - 不显示 2 - 上方 8 - 底部 | 2
bgColor 或BackColor | 整个统计图的背景色 | 颜色串，或以逗号分隔的2个颜色串(垂直渐变) | 沿用页面上下文
Colors | 统计图的颜色 | 以逗号分隔的颜色串 | (无) 自动产生
isOutlineDataPoint 或isOutlinePoint | 是否显示数据点的小圆球 | true/false 备注：仅用于折线/曲线/区域图 | true
LineThick | 折线/曲线的线条宽度 | 像素数, 0 到 12 | 1
Border | 边界线风格 | 1.none - 无边界 2.single - 单线条边界 3.3d - 3D凹陷边界 | single
BorderWidth | 边界线粗细 | 像素数 | 1
BorderRound | 圆角边界的直径 | 像素数 | 0
BorderColor | 边界线颜色 | 颜色串 | 0
BarImage | 柱状图的背景图案 | 如下名值对，分号(;)分隔： src - 图片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
coordinateBackColor | 坐标区域背景色 | 颜色串，或以逗号分隔的2个颜色串(垂直渐变) 注: 仅用于bar、line、curve、area | (无)
valueMask | 数值显示掩码 | 串，如"#,###.00" | #,##0.#
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开始计数) | (无)
hasMenu | 是否需要鼠标右键弹出菜单 | true/false | true
EventLog | 事件日志 | 文件名，建议后缀是txt, 不必带路径，系统将自动在 BC 目录下创建. 该文件能自动记录本组件实例的所有事件, 用于程序调试. 注：正式运行时请不要使用，因为频繁读写磁盘会导致性能下降. | 无
FuncLog | 函数调用日志 | 文件名，建议后缀是txt, 不必带路径，系统将自动在 BC 目录下创建. 该文件能自动记录本组件实例被调用的所有函数, 用于程序调试. 注：正式运行时请不要使用，因为频繁读写磁盘会导致性能下降. | 无
FuncParaChars | 函数日志中参数最大字数 | 数字，当启用函数日志时，函数的参数最多保留字数. | 128
FuncReturnChars | 函数日志中返回值最大字数 | 数字，当启用函数日志时，函数的返回值最多保留字数. | 0

2.函数

Supcan Chart的函数是通过插件/加载项的 func( string funcname, string paras ) 函数间接调用的，Supcan Chart组件的可用funcname如下:
此外，Chart还拥有一组和Treelist、Freeform完全一样的全局函数，请参见全局函数介绍。
3.Load的数据格式

Chart组件除了用AddSeries( )函数设置数据，也可以用Load( )函数一次性加载数据，数据的格式必须是XML或JSON格式，比如:

    <?xml version="1.0" encoding="utf-8"?>
    <root>
     <serieses>
      <series name="一季度">
       <北京市>3902</北京市>
       <沈阳市>1080</沈阳市>
       <西宁市>4380</西宁市>
       <合肥市>3300</合肥市>
      </series>
      <series name="二季度">
       <北京市>902</北京市>
       <沈阳市>80</沈阳市>
       <西宁市>380</西宁市>
       <合肥市>300</合肥市>
      </series>
     </serieses>
    </root>

该例子有2个系列，数据项ID是城市. 如果采用JSON格式，则应该是类似这样的：

    [
     {"series":"一季度", "data":{"北京市":3902, "沈阳市":1080} },
     {"series":"二季度", "data":{"北京市":1902, "沈阳市":80} }
    ]

这例子比较简单，更复杂的例子请看 chartdata.xml.
XML数据的书写规则如下：

    <?xml version="1.0" encoding="utf-8"?>
    <root>
     <!-- Properties是可选的节点，用于设定统计图的外观  -->
     <!-- Chart、Caption这些属性即本文档“1.创建实例”中的创建参数  -->
     <properties Chart="bar" Caption="上半年各市销售额(万元)">
      <!-- itemtext定义了各个数据项ID在统计图上的显示文字  -->
      <itemtext>
       <city1>北京市</city1>
       <city2>沈阳市</city2>
       <city3>西宁市</city3>
      </itemtext>
     </properties>
     <!-- 下面是纯数据， 注意，由于在Properties中定义了数据项的显示文字，所以数据项ID没有采用中文  -->
     <serieses>
      <series name="一季度">  //name是系列名
       <city1>3902</city1>
       <city2>1080</city2>
       <city3>4380</city3>
      </series>
      <series name="二季度">
       <city1>902</city1>
       <city2>80</city2>
       <city3>380</city3>
      </series>
     </serieses>
    </root>

如果采用JSON, 则应该类似如下：

    {"properties": {"chart":"bar", "Caption":"上半年各市销售额(万元)", "itemtext": {"city1":"合肥市", "city2":"哈尔滨市"} } },
    {"serieses":
     [
      {"series":"一季度", "data": {"city1":3902, "city2":3902} },
      {"series":"二季度", "data": {"city1":3112, "city2":5000} }
     ]
    }

4.事件

Supcan Chart的OnEvent( id, Event, p1, p2, p3, p4 )事件含义及参数分别如下：