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/falsefalse
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 到 121
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/falsetrue
isAnimate是否以动画启动true/falsetrue
coordinateBackColor坐标区域背景色颜色串,或以逗号分隔的2个颜色串(垂直渐变)
注: 仅用于bar、line、curve、area
(无)
valueMask数值显示掩码串,如"#,###.00"#,##0.#
valueMaskYY轴数值显示掩码串,如"#,###.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/falsetrue
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 )事件含义及参数分别如下: