AnyChart 图形配置说明.doc

AnyChart 图形配置说明

文档变更历史
日期
版本
作者
修改内容
评审号
变更控制号
发布日期
2008-4-2
V01.00.000
张建中
新建文档

2008-4-5
V01.00.001
张建中
修改示例

2008-5-5
V01.00.002
张建中
修改示例

2008-5-6
V01.00.003
张建中
增加钻取配置

2008-5-13
V01.00.004
张建中
增加升级说明

为丰富报表图形展示，前端模块组开发了以AnyChart Flash图形控件为基础的，新的图形配置接口。

1 AnyChart支持的图形类型
Name
Single Series
Multi Series
Horizontal
Vertical
3D
Area/Spline Area/ StepLine Area Chart
Yes
Yes
Yes
Yes
No
Bar Chart
Yes
Yes
Yes
Column
Yes
Bubble Chart
Yes
Yes
Yes
Yes
No
Column
Yes
Yes
Bar
Yes
Yes
Cone
Yes
Yes
Yes
Yes
Yes
Cylinder
Yes
Yes
Yes
Yes
Yes
Japanese Candlestick
Yes
Yes
No
Yes
No
Line/Spline/StepLine
Yes
Yes
Yes
Yes
No
Open-High-Low-Close
Yes
Yes
No
Yes
No
Marker
Yes
Yes
Yes
Yes
No
Percent Stacked Area/Spline/StepLine Area
Yes
Yes
Yes
Yes
No
Percent Stacked Column/Bar/Cylinder
Yes
Yes
Yes
Yes
Yes
Pie/Doughnut
Yes
Yes
-
-
No
Pyramid
Yes
Yes
Yes
Yes
Yes
Range Area/Spline Area
Yes
Yes
Yes
Yes
No
Range Bar/Column/Cylinder
Yes
Yes
Yes
Yes
Yes
Scatter Line
Yes
Yes
No
Yes
No
Scatter Bubble
Yes
Yes
No
Yes
No
Scatter Point (Marker)
Yes
Yes
No
Yes
No
Stacked Area/Spline Area
Yes
Yes
Yes
Yes
No
Stacked Bar/Column/Cylinder
Yes
Yes
Yes
Yes
Yes

2 AnyChart支持的混合图形
Chart Combination
This table list all types included in AnyChart Flash Charting Component in rows and columns headings, Y at the intersection of a row and a column means that this types can be combined within one data plot , D - dashboard combination possible, both D and Y means both options available.
Type
Bar1
Column2
Line3
Area4
Stacked Bar
Stacked Column
Stacked Area
Range Bar
Range Column
Range Area
Marker
Candlestick
OHLC
Bubble
Scatter
XY Line
Pie5
Maps
Bar1
Y D

Column2
D
Y D

Line3
Y D
Y D
Y D

Area4
Y D
Y D
Y D
Y D

Stacked Bar
Y D
D
Y D
Y D
Y D

Stacked Column
D
Y D
Y D
Y D
D
Y D

Stacked Area
Y D
Y D
Y D
Y D
Y D
Y D
Y D

Range Bar
Y D
D
Y D
Y D
Y D
D
Y D
Y D

Range Column
D
Y D
Y D
Y D
D
Y D
Y D
D
Y D

Range Area
Y D
Y D
Y D
Y D
Y D
Y D
Y D
Y D
Y D
Y D

Marker
Y D
Y D
Y D
Y D
Y D
Y D
Y D
Y D
Y D
Y D
Y D

Candlestick
D
Y D
Y D
Y D
D
Y D
Y D
D
Y D
Y D
Y D
Y D

OHLC
D
Y D
Y D
Y D
D
Y D
Y D
D
Y D
Y D
Y D
Y D
Y D

Bubble
Y D
Y D
Y D
Y D
Y D
Y D
Y D
Y D
Y D
Y D
Y D
Y D
Y D
Y D

Scatter
D
D
D
D
D
D
D
D
D
D
Y D
D
D
Y D
Y D

XY Line
D
D
D
D
D
D
D
D
D
D
Y D
D
D
Y D
Y D
Y D

Pie5
D
D
D
D
D
D
D
D
D
D
D
D
D
D
D
D
Y D

Maps
D
D
D
D
D
D
D
D
D
D
Y D
D
D
Y D
D
D
D
N
1 - Bar in this table refers to both Bar, Horizontally oriented Cone, Cylinder and Pyramid charts.
2 - Column in this table refers to both Column, Vertically oriented Cone, Cylinder and Pyramid charts.
3 - Line in this table refers to both Line, Spline and Step Line charts.
4 - Area in this table refers to both Line, Spline and Step Line charts.
5 - Pie in this table refers to both Pie and Donut charts.

3 封装文件部署
封装后需要部署的文件有
/Frame/HTC/gh_anychart.htc;
/Frame/HTC/gh_anychart_series.htc;
/Frame/JS/AnyChart.js （AnyChart 提供javascript库）
/Frame/JS/AnyChart_Wrapper.js (由前端模块组实现的AnyChart XML 数据接口文件的封装)
/Frame/JS/AnyChart_Settings.js （用于AnyChart 样式或模板的定义）

4 配置属性说明
属性
值
说明
用于 gh_anychart
id
n/a
Unrequired，如设置系统将自动设置为一个uuid
data_src
stream (default)
file
Unrequired，当值为file时必须指定xml_data_path作为数据源；
默认由程序构造xml data
xml_data_path
n/a
用于指定xml data的路径
control_type
tab
Unrequired，指定属性时，将使用tab方式展现chart
ac_bgcolor
n/a
Unrequired，用于指定AnyChart Flash控件背景色；
chart_margin
参阅AnyChart XML Reference
all
left
top
right
bottom

Unrequired，使用类似json或js关联数组的方式指定；
例：chart_margin=”all:2” 或 chart_margin =“left: 2, top 2, right:2, bottom: 2”
单位为pixel
ac_settings
n/a
Unrequired，引用在AnyChart_Settings.js中定义的相关属性
用于 gh_anychart_chart
id
n/a

plot_type
CategorizedVertical (default)
CategorizedHorizontal
CategorizedBySeriesVertical
CategorizedBySeriesHorizontal
Scatter
Pie
Doughnut
Map
Required，指定图表类型
参阅AnyChart Users's Guide
chart_name
n/a
required
tab_title
n/a
Unrequired，当在gh_anychart中指定control_type 为tab时可指定该属性，如不指定将使用chart_title为tab_title
chart_title
参阅AnyChart XML Reference

Required, 当 title 的text中有表达式时，需要指定model
例：chart_title= "enabled: true, text: '点对点短信业务报表趋势图'"
axes
参阅AnyChart XML Reference
Required
例：axes="y_axis: {title: {enabled: false}, labels: {enabled: true, format: '{%Value}{numDecimals:0}'}}, x_axis: {title: {enabled: false}}"
chart_legend
参阅AnyChart XML Reference
Unrequired
例：chart_legend="enabled: true, title: {enabled : false}"

ac_settings
n/a
Unrequired，引用在AnyChart_Settings.js中定义的相关属性
Checked
True/false
Unrequired，当gh_anychart指定control_type属性时需要指定该属性
Control_type
Checkbox
radio

用于 gh_anychart_series
id
n/a
required
series_name
n/a
required
series_type
Bar (defualt)
RangeBar
Line
RangeArea
RangeSplineArea
Spline
Marker
Area
SplineArea
StepLineForward
StepLineBackward
StepLineForwardArea
StepLineBackwardArea
Bubble
Candlestick
OHLC

model
n/a
Required
point
参阅AnyChart XML Reference
Required，在name和y x 值中可以使用表达式
例：point="name: 'MONTH', y: '#{expr{#{SALES} + #{SALES} }}'"
label
参阅AnyChart XML Reference
Unrequired
例：label="enabled:false, format: '{%YValue}'"
tooltip
参阅AnyChart XML Reference
Unrequired
例：tooltip="enabled:true, style:'test_tooltip_font'"
color
n/a
Unrequired
Checked
True/false
当gh_anychart_chart指定control_type属性时需指定该属性
condition_expr
n/a
详细设置参考示例
使用表达式表示预警或其他条件
例：condition_expr="Expr1: '#{expr{#{current}/#{previous}}}'"
Threshold
n/a
详细设置参考示例
设置预警或其他
forecast
详细设置参考示例
设置预测值；
需指定color
Model
Tooltip的format
详细设置参考示例
例：forecast="name: '#{MONTH}', y: '#{SALES}', color: 'Green', model:'test_forecast', tooltip:{enabled:true, format: '#{MAX_SALES}--#{MIN_SALES}'}"
ac_settings
n/a
Unrequired，引用在AnyChart_Settings.js中定义的相关属性
用于 gh_anychart_threshold
Id
n/a
Required
Name
n/a
Required
Type
Custom (default)
EqualInterval
EqualDistribution
Required
用于 gh_anychart_threshold_conditon
Id
n/a
Required
Name
n/a
Required
Type
between
notBetween
equalTo
notEqualTo
greaterThen
greaterThenOrEqualTo
lessThen
lessThenOrEqualTo
Required
Value_1
参阅AnyChart XML Reference
可以使用在gh_anychart_series 中定义的 condition_expr
例：value_1="{%Expr1}"
Value_2
参阅AnyChart XML Reference

Value_3
参阅AnyChart XML Reference

color
n/a
设置告警或预测颜色

5 配置示例
配置图形时必须在head中应用AnyChart.js
直接从文件配置图形
<div id="anychart_test" class="gh_anychart" width=100% height=100% xml_data_path="./test_xml_data.xml" data_src="file"></div>
构造图形
1) 复杂图形配置
<div id="anychart_test" class="gh_anychart" width=100% height=100% data_src="stream" control_type="tab" ac_settings="AC.AnyChart_Settings_Template">
<div id="chart1" class="gh_anychart_chart" plot_type="CategorizedVertical" chart_name="chart1" tab_title="hello world"
chart_title="enabled: true, text: '#{MONTH} 图形1', model:'test_data5'"
axes="y_axis: {title: {enabled: true, text: '销售'}, labels: {enabled: true, format: '{%Value}{numDecimals:0}'}}, x_axis: {title: {enabled: true, text: '月份'}}"
chart_legend="enabled: true, title: {enabled : true, text: '图例'}, format: 'Series: {%Icon} {%Name}'" control_type="checkbox" chart_margin="all:0" checked="true" ac_settings="AC.Chart_Settings">
<div id="threshold1" class="gh_anychart_threshold" name="warnning_threshold" type="Custom">
<div id="condition1" class="gh_anychart_threshold_condition"
name="告警指标" type="notBetween" value_1="{%Expr1}" value_2="0.95" value_3="1.05" color="#FF0000"></div>
<div id="condition1" class="gh_anychart_threshold_condition"
name="明日预测" type="equalTo" value_1="{%Forecast_Color}" value_2="Green" color="Green"></div>
</div>
<div id="series1" class="gh_anychart_series" series_name="2004 销售" series_type="Line" model="test_data3"
point="name: 'MONTH', y: '#{expr{#{SALES} + #{SALES} }}'" label="enabled:false, format: '{%YValue}'" tooltip="enabled:true, style:'test_tooltip_font'" checked="true" color="DarkViolet"></div>
<div id="series2" class="gh_anychart_series" series_name="2003 销售" series_type="Bar" model="test_data4"
point="name: 'MONTH', y: 'SALES'" tooltip="enabled:true" checked="false"
threshold="warnning_threshold"
condition_expr="Expr1: '#{expr{#{current}/#{previous}}}'"
forecast="name: '#{MONTH}', y: '#{SALES}', color: 'Green', model:'test_forecast', tooltip:{enabled:true, format: '#{MAX_SALES}--#{MIN_SALES}'}"></div>
</div>
<div id="chart2" class="gh_anychart_chart" plot_type="CategorizedVertical"
chart_title="品牌分布"
axes="y_axis: {title: {enabled: true, text: '销售'}, labels: {enabled: true, format: '{%Value}{numDecimals:0}'}}, x_axis: {title: {enabled: true, text: '月份'}}"
chart_legend="enabled: true, title: {enabled : true, text: '图例'}, format: 'Series: {%Icon} {%Name}'"
control="radio">
<div id="series1" class="gh_anychart_series"
series_name="2004 销售" series_type="Line" model="test_data3" point="name: 'MONTH', y: 'SALES'" label="enabled:false, format: '{%YValue}'" tooltip="enabled:true" checked="true" color="DarkViolet"></div>
<div id="series2" class="gh_anychart_series"
series_name="2003 销售" series_type="Bar" model="test_data4" point="name: 'MONTH', y: 'SALES'" tooltip="enabled:true" checked="false"></div>
</div>
</div>

2）常用线图配置
<div id="anychart_test" class="gh_anychart" width=100% height=100% style="background-color:#f3f3f3" ac_bgcolor="#f3f3f3">
<div id="chart1" class="gh_anychart_chart" plot_type="CategorizedVertical" chart_name="chart1" chart_title="enabled: true, text: '点对点短信业务报表趋势图'" axes="y_axis: {title: {enabled: false}, labels: {enabled: true, format: '{%Value}{numDecimals:0}'}}, x_axis: {title: {enabled: false}}"
chart_legend="enabled: false, title: {enabled : false}" control_type="checkbox">
<div id="series1" ac_settings="AC.Series_Settings_DataBusi" class="gh_anychart_series"
series_name="网内点对点用户 "
series_type="Line" model="xml_usrcnt_gh"
point="name: 'DATE', y: 'SMS_IN'" checked="true" color="#2986FF"></div>
<div id="series2" ac_settings="AC.Series_Settings_DataBusi" class="gh_anychart_series"
series_name="网间（电信）点对点用户" series_type="Line" model="xml_usrcnt_gh"
point="name: 'DATE', y: 'DX_SMS_MID'" checked="false" color="#DDDD22"></div>

</div>
</div>
AC.Series_Settings_DataBusi = {
label : {
enabled : false
},

tooltip : {
enabled : true,
format : "{%Value}{numDecimals:0}"
}
}

2）常用柱图配置
<div id="anychart_test" class="gh_anychart" width=100% height=100% style="background-color:#f3f3f3" ac_bgcolor="#f3f3f3">
<div id="chart1" class="gh_anychart_chart" plot_type="CategorizedVertical" chart_name="chart1" chart_title="enabled: true, text: '新增与退订业务分析趋势图'" axes="y_axis: {title: {enabled: false}, labels: {enabled: true, format: '{%Value}{numDecimals:0}'}}, x_axis: {title: {enabled: false}}"
chart_legend="enabled: false, title: {enabled : false}" control_type="checkbox">
<div id="series1" ac_settings="AC.Series_Settings_DataBusi" class="gh_anychart_series"
series_name="新订购包月业务次数" series_type="Bar" model="xml_usrcnt_gh"
point="name: 'DATE', y: 'M_SERV_CNT '" checked="true"></div>
<div id="series2" ac_settings="AC.Series_Settings_DataBusi" class="gh_anychart_series"
series_name="新订购按次业务次数" series_type="Bar" model="xml_usrcnt_gh"
point="name: 'DATE', y: 'I_SERV_CNT '" checked="true"></div>
</div>
</div>

3）常用饼图配置
<div id="the_chart" class="gh_anychart" width=100% height=100% style="background-color:#f3f3f3" ac_bgcolor="#f3f3f3" control_type="tab">
<div id="chart1" class="gh_anychart_chart" plot_type="Pie" chart_name="chart1"
chart_title="enabled: true, text: 'V网集团通信离网客户流向占比饼图(按时间查看)'"
axes="y_axis: {title: {enabled: false}, labels: {enabled: true, format: '{%Value}{numDecimals:0}'}}, x_axis: {title: {enabled: false}}"
chart_legend="enabled: true, title: {enabled : false}" checked="true">
<div id="series1" ac_settings="AC.Series_Settings_DataBusi" class="gh_anychart_series"
series_name="全球通通信离网" series_type="Pie" model="xml_chart_date_1"
point="name: 'BRND_NAME', y: 'USR_CNT'" tooltip="enabled:true, format: '{%Name}:{%Value}'" checked="true"></div>
</div>
<div id="chart2" class="gh_anychart_chart" plot_type="Pie" chart_name="chart2"
chart_title="enabled: true, text: 'V网集团通信离网客户流向占比饼图(按地市查看)'"
axes="y_axis: {title: {enabled: false}, labels: {enabled: true, format: '{%Value}{numDecimals:0}'}}, x_axis: {title: {enabled: false}}"
chart_legend="enabled: true, title: {enabled : false}">
<div id="series2" ac_settings="AC.Series_Settings_DataBusi" class="gh_anychart_series" series_name="全球通通信离网" series_type="Pie" model="xml_chart_cty_1"
point="name: 'BRND_NAME', y: 'USR_CNT'" tooltip="enabled:true, format: '{%Name}:{%Value}'" checked="true"></div>
</div>
</div>

6 配置注意事项
1） 表达式的写法：#{xxxx} 用于直接引用model中的字段；#{expr{#{SALES} + #{SALES} }} 用于计算式
2） 在配置属性说明列表中指明需要参考AnyChart XML Reference的 属性，都必须按照类似javascript中关联数组的语法设置，设置方式可以参考示例或/Frame/JS/AnyChart_Settings.js中的写法。

7 AnyChart 图形的点事件
页面图形的钻取链接是基于AnyChart图形的“点”事件的，即附加在每个数据项上的Click事件。

在页面上配置图形时，我们可以在每个series的point 属性中定义若干个action，如

<div id="series1" name="series1"   class="gh_anychart_series" series_name="" series_type="Pie" model="init_data_2" point="name: 'COL_1', y: 'COL_2', actions:[{type: 'Call', function_name: 'refresh_chart' , args:['#{COL_3}']}]" >

其中 point 属性中的 actions 数组中可以使用{}，{} ，… 的方式定义若干个action对象，常用的有以下两种类型
类型（type）
描述
navigateToURL
点击一个数据项时转向一个URL，当action为该类型时，必须设置一个 url 属性，还有一个可选的target属性
call
点击一个数据项时执行一个function，该类型action必须有个一个function_name 属性，其值可以是在页面定义的函数或浏览器内置函数，args 属性为可选项，args属性是一个数组对象，可以在其中定义若干个用于function_name所指定的函数，默认类型都为String，如需引用model中的相关字段，须使用#{XXX}的方式，如上例所示。

8 钻取链接的配置
图形钻取的配置可以由上面介绍的两种action实现，下面以call 类型为例介绍配置的实现。

以下面的代码为例
<div id="series1" class="gh_anychart_series"
series_name="当月每日" series_type="Bar"
model="this_than_model"
point="name: 'TM_INTRVL_CD',
y: 'DAY_YIDG_RADIO',
actions:[
{
type: 'Call',
function_name:'fun',
args:[
'KPI_Market_Day_New_User_Cty.jsp?date_select