AnyChart 图形配置说明.doc

AnyChart 图形配置说明文档变更历史日期版本作者修改内容评审号变更控制号发布日期2008-4-2V01.00.000张建中新建文档2008-4-5V01.00.001张建中修改示例2008-5-5V01.00.002张建中修改示例2008-5-6V01.00.003张建中增加钻取配置2008-5-13V01.00.004张建中增加升级说明为丰富报表图形展示，前端模块组开发了以AnyChart Flash图形控件为基础的，新的图形配置接口。1 AnyChart支持的图形类型NameSingle SeriesMulti SeriesHorizontalVertical3DArea/Spline Area/ StepLine Area Chart YesYesYesYesNoBar Chart YesYesYesColumnYesBubble Chart YesYesYesYesNoColumnYesYesBarYesYesConeYesYesYesYesYesCylinderYesYesYesYesYesJapanese CandlestickYesYesNoYesNoLine/Spline/StepLineYesYesYesYesNoOpen-High-Low-CloseYesYesNoYesNoMarkerYesYesYesYesNoPercent Stacked Area/Spline/StepLine Area YesYesYesYesNoPercent Stacked Column/Bar/CylinderYesYesYesYesYesPie/DoughnutYesYes-NoPyramidYesYesYesYesYesRange Area/Spline Area YesYesYesYesNoRange Bar/Column/CylinderYesYesYesYesYesScatter Line YesYesNoYesNoScatter Bubble YesYesNoYesNoScatter Point (Marker)YesYesNoYesNoStacked Area/Spline Area YesYesYesYesNoStacked Bar/Column/CylinderYesYesYesYesYes2 AnyChart支持的混合图形Chart CombinationThis 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. TypeBar1Column2Line3Area4Stacked Bar Stacked Column Stacked AreaRange BarRange ColumnRange AreaMarkerCandlestickOHLCBubbleScatterXY LinePie5MapsBar1Y D Column2DY DLine3Y DY DY D Area4Y D Y DY DY DStacked Bar Y DDY DY DY DStacked Column DY DY DY DDY DStacked Area Y DY DY DY DY D Y D Y DRange BarY DDY DY DY D DY D Y DRange ColumnDY DY DY DDY D Y D DY DRange AreaY DY DY DY DY D Y D Y D Y D Y D Y DMarkerY DY DY DY DY D Y DY DY DY DY DY DCandlestickDY DY DY DDY DY DDY DY DY DY DOHLCDY DY DY DDY DY DDY DY DY DY DY DBubbleY DY DY DY DY D Y DY DY DY DY DY DY DY DY DScatterDDDDDDDDDDY D DDY DY DXY Line DDDDDDDDDDY D DDY DY DY DPie5DDDDDDDDDDDDDDDDY D MapsDDDDDDDDDDY DDDY DDDDN1 - 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_anychartidn/aUnrequired，如设置系统将自动设置为一个uuiddata_srcstream (default) fileUnrequired，当值为file时必须指定xml_data_path作为数据源；默认由程序构造xml dataxml_data_pathn/a用于指定xml data的路径control_typetabUnrequired，指定属性时，将使用tab方式展现chartac_bgcolorn/aUnrequired，用于指定AnyChart Flash控件背景色；chart_margin参阅AnyChart XML ReferencealllefttoprightbottomUnrequired，使用类似json或js关联数组的方式指定；例：chart_margin=”all:2” 或 chart_margin =“left: 2, top 2, right:2, bottom: 2” 单位为pixelac_settingsn/aUnrequired，引用在AnyChart_Settings.js中定义的相关属性用于 gh_anychart_chartidn/aplot_typeCategorizedVertical (default)CategorizedHorizontalCategorizedBySeriesVerticalCategorizedBySeriesHorizontalScatterPieDoughnutMapRequired，指定图表类型参阅AnyChart Userss Guidechart_namen/arequiredtab_titlen/aUnrequired，当在gh_anychart中指定control_type 为tab时可指定该属性，如不指定将使用chart_title为tab_titlechart_title参阅AnyChart XML ReferenceRequired, 当 title 的text中有表达式时，需要指定model例：chart_title= enabled: true, text: 点对点短信业务报表趋势图axes参阅AnyChart XML ReferenceRequired例：axes=y_axis: title: enabled: false, labels: enabled: true, format: %ValuenumDecimals:0, x_axis: title: enabled: falsechart_legend参阅AnyChart XML ReferenceUnrequired例：chart_legend=enabled: true, title: enabled : falseac_settingsn/aUnrequired，引用在AnyChart_Settings.js中定义的相关属性CheckedTrue/falseUnrequired，当gh_anychart指定control_type属性时需要指定该属性Control_typeCheckboxradio用于 gh_anychart_seriesidn/arequiredseries_namen/arequiredseries_typeBar (defualt)RangeBar Line RangeArea RangeSplineArea Spline Marker Area SplineArea StepLineForward StepLineBackward StepLineForwardArea StepLineBackwardArea Bubble Candlestick OHLCmodeln/aRequiredpoint参阅AnyChart XML ReferenceRequired，在name和y x 值中可以使用表达式例：point=name: MONTH, y: #expr#SALES + #SALES label参阅AnyChart XML ReferenceUnrequired例：label=enabled:false, format: %YValuetooltip参阅AnyChart XML ReferenceUnrequired例：tooltip=enabled:true, style:test_tooltip_fontcolorn/aUnrequiredCheckedTrue/false当gh_anychart_chart指定control_type属性时需指定该属性condition_exprn/a详细设置参考示例使用表达式表示预警或其他条件例：condition_expr=Expr1: #expr#current/#previousThresholdn/a详细设置参考示例设置预警或其他forecast详细设置参考示例设置预测值；需指定colorModelTooltip的format详细设置参考示例例：forecast=name: #MONTH, y: #SALES, color: Green, model:test_forecast, tooltip:enabled:true, format: #MAX_SALES-#MIN_SALESac_settingsn/aUnrequired，引用在AnyChart_Settings.js中定义的相关属性用于 gh_anychart_thresholdIdn/aRequiredNamen/aRequiredTypeCustom (default)EqualIntervalEqualDistributionRequired用于 gh_anychart_threshold_conditonIdn/aRequiredNamen/aRequiredTypebetweennotBetweenequalTonotEqualTogreaterThengreaterThenOrEqualTolessThenlessThenOrEqualToRequiredValue_1参阅AnyChart XML Reference可以使用在gh_anychart_series 中定义的 condition_expr例：value_1=%Expr1Value_2参阅AnyChart XML ReferenceValue_3参阅AnyChart XML Referencecolorn/a设置告警或预测颜色5 配置示例配置图形时必须在head中应用AnyChart.js直接从文件配置图形构造图形1) 复杂图形配置 2）常用线图配置 AC.Series_Settings_DataBusi = label : enabled : false,tooltip : enabled : true,format : %ValuenumDecimals:02）常用柱图配置 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点击一个数