AnyChart 图形配置说明


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-1 3 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 Ba r1 Colu mn2 Li ne3 Ar ea4 Stac ked Bar Stac ked Colu mn Stac ked Area Ra nge Bar Ran ge Colu mn Ra nge Are a Mar ker Candle stick OH LC Bub ble Scat ter X Y Li ne Pi e5 Ma ps Bar1 Y D Colum n2 D Y D Line3 Y D Y D Y D Area4 Y D Y D Y D Y D Stacke d Bar Y D D Y D Y D Y D Stacke d Colum n D Y D Y D Y D D Y D Stacke d 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 Colum n 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 Marke r Y D Y D Y D Y D Y D Y D Y D Y D Y D Y D Y D Candle stick 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 D D D D D D D D D D Y D D D Y D Y D Y Line 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 Unrequired,使用类似 json 或 js 关联 数组的方式指定; 例:chart_margin=”all:2” 或 top right bottom 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 直接从文件配置图形
构造图形 1) 复杂图形配置
2)常用线图配置
AC.Series_Settings_DataBusi = { label : { enabled : false }, tooltip : { enabled : true, format : "{%Value}{numDecimals:0}" } } 2)常用柱图配置
3)常用饼图配置
6 配置注意事项 1) 表达式的写法:#{xxxx} 用于直接引用 model 中的字段;#{expr{#{SALES} + #{SALES} }} 用于计算式 2) 在配置属性说明列表中指明需要参考 AnyChart XML Reference 的 属性,都必须按照类 似 javascript 中关联数组的语法设置,设置方式可以参考示例或 /Frame/JS/AnyChart_Settings.js 中的写法。 7 AnyChart 图形的点事件 页面图形的钻取链接是基于 AnyChart 图形的“点”事件的,即附加在每个数据项上的 Click 事件。 在页面上配置图形时,我们可以在每个 series 的 point 属性中定义若干个 action,如
其中 point 属性中的 actions 数组中可以使用{},{} ,… 的方式定义若干个 action 对象, 常用的有以下两种类型 类型(type) 描述 navigateToURL 点击一个数据项时转向一个 URL,当 action 为该类型时,必 须设置一个 url 属性,还有一个可选的 target 属性 call 点击一个数据项时执行一个 function,该类型 action 必须有个 一个 function_name 属性,其值可以是在页面定义的函数或浏 览器内置函数,args 属性为可选项,args 属性是一个数组对 象,可以在其中定义若干个用于 function_name 所指定的函数, 默认类型都为 String,如需引用 model 中的相关字段,须使用 #{XXX}的方式,如上例所示。 8 钻取链接的配置 图形钻取的配置可以由上面介绍的两种 action 实现,下面以 call 类型为例介绍配置的实现。 以下面的代码为例
function fun() {} 我们分析代码中灰色的部分,其只有一个 action,有两个 arg,指定了按区域分析和按品牌 的分析的两种路径。arg 中#{DATE}表示 model 属性指定的数据集中当前数据项的 DATE 值。 函数 show_cty_detail 根据情况处理参数,打开相应的窗口。 由于是使用链接方式实现的一个预定义的钻取路径,所以主要的工作量集中于链接报表的开 发,以及链接路径的处理。这些都需要根据实际情况在具体的开发中灵活处理。 9 升级说明 升级时部署以下文件即可 /Frame/HTC/gh_anychart.htc; /Frame/HTC/gh_anychart_series.htc; /Frame/JS/AnyChart.js /Frame/JS/AnyChart_Settings.js /Frame/HTC/swf/AnyChart.swf 10 参考文档 AnyChart Users's Guide.; AnyChart XML Reference.;
还剩14页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 4 金币 [ 分享pdf获得金币 ] 0 人已下载

下载pdf

pdf贡献者

higengwei

贡献于2013-01-20

下载需要 4 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf