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统计图类型
0pie - 圆饼图1bar - 柱状图
2line - 折线图3curve - 曲线图
4area - 区域图5radar - 雷达图
0
items统计图中最多能显示数据项数量数值
注1:最多不得超过155;
注2:超出的部分、数值小的数据项将归并到“其它”数据项
28
textContent显示的文字内容0 - 不显示,  1 - 仅数据项名称,  2 - 名称、百分比,  3 - 名称、数值,
也可以是表达式串 - 表达式中可以使用 name、data、percent 变量, 分别表示名称、数值、百分比, 例如:
insertChart("AF", "border=none; textContent=name+': ' +data + '吨, 占总数的' + percent + '%'")
注:请注意里面的双引号、单引号
2
tiptip内容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, 格式将和传入的数据的格式保持一致(无)
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开始计数)(无)
isDrawZero是否显示数值为0的线条1true, 全部显示;
0false, 数值为零或为空的坐标处不绘制线条;
2NotNull, 数值为空的坐标处不绘制线条;
注:仅用于折线/曲线/区域图
true
LineThick折线/曲线的线条宽度像素数, 0 到 121
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/falsetrue
其它isAnimate是否以动画启动true/falsetrue
hasMenu是否需要鼠标右键弹出菜单true/falsetrue
isUseContextFont是否采用页面上下文字体true/falsefalse
EventLog事件日志文件名,建议后缀是txt, 不必带路径,系统将自动在 BC 目录下创建. 该文件能自动记录本组件实例的所有事件, 用于程序调试. 建议写成 %autoName% 让插件自动命名.
注:正式运行时请不要使用,因为频繁读写磁盘会导致性能下降.
FuncLog函数调用日志文件名,建议后缀是txt, 不必带路径,系统将自动在 BC 目录下创建. 该文件能自动记录本组件实例被调用的所有函数, 用于程序调试. 建议写成 %autoName% 让插件自动命名.
注:正式运行时请不要使用,因为频繁读写磁盘会导致性能下降.
FuncParaChars函数日志中参数最大字数数字,当启用函数日志时,函数的参数最多保留字数.128
FuncReturnChars函数日志中返回值最大字数数字,当启用函数日志时,函数的返回值最多保留字数.0