看Anychart图表控件如何从flash版本迁移至HTML5版本

　　早在去年9月份的时候，Anychart公司宣布旗下flash图表控件Anychart 6.0版本支持HTML，本文那么我们就一起看看如何将anychart图表迁移到新的HTML版本的Anychart。

　　注：尽管已经集成了HTML 5版本，但是HTML5支持仍处于测试阶段，因此并不是所有图表类型和功能都可用，并且HTML 5版本中的所有图表的外观与Flash版本不完全相同。

　　由于Flash在移动设备上并不能完好运行，所以我们得创建一个能生成SVG格式图表的Java Script图表引擎。

• 文件结构
• 嵌入
  
  • Flash Only
  • JavaScript (HTML5) Only
  • 同步使用HTML5 和Flash
  • 异步使用HTML5 和Flash
• 渲染选项
• 支持的绘图类型
• JavaScript（HTML 5）版本支持的图表类型
• JavaScript（HTML 5）版本中的特征

　　一、文件结构

　　在SWF文件中除了包含Flash引擎外，AnyChartHTML5.js中还包含了JavaScript (HTML5) 组件。

　　/AnyChartFolder

　　 /swf
AnyChart.swf
/js
AnyChart.js
AnyChartHTML5.js
anychart.xml
anychart.html

　　二、嵌入

　　1、Flash Only

　　如果你不想使用HTML5图表，你可以像平时一样升级，只需要更换SWF文件，代码如下：

　　

　　默认情况下，AnyChart.renderingType被设置成anychart.RenderingType.FLASH_ONLY ，这意味着 需要 用Flash Player来查看图表，若是Flash Player不可用，图表则没有任何显示。

　　2、JavaScript (HTML5) Only

　　在使用AnyChart JavaScript (HTML5) 组件时，你得嵌入以下的部分代码：

　　

　　注：（1）粗体部分需要被添加到原来的代码中；（2）AnyChart.renderingType设置成anychart.RenderingType.SVG_ONLY

　　3、同步使用HTML5 和Flash

　　当Flash Player不能用时，你可以根据下面的方法启用HTML5支持：

　　

　　这样一来，当Flash Player不能用时，AnyChart会切换到HTML5引擎并显示基于SVG的图表。

　　4、异步使用HTML5 和Flash

　　JavaScript被广泛应用于现代网站，多数JavaScript文件在页面显示前才被载入-这会减缓了页面加载并延长了显示时间。如果你 使用了本节如上所示的代码，只有在AnyChart HTML5引擎加载完毕后才能显示页面。如果使用 Flash 版本就不后出现这样的情况了。因此，为了加速下载和省略加载不必要的引擎，你可以使用异步加载JavaScript。

　　

　　注： （1）AnyChart.loadHTML5Engine() 是一个开始AnyChartHTML5.js加载的方法，在未加载完毕前，不需对图表进行任何操作；（2）AnyChart.ready（）是一个加载事 件处理器，当HTML5引擎加载完毕后，AnyChart.ready（）会启动相应的功能。

　　三、渲染选项

　　当你将图表嵌入页面中时，选择你所需要使用的引擎。

Value	Description
anychart.RenderingType.FLASH_ONLY	Flash engine is used in any case.
anychart.RenderingType.SVG_ONLY	HTML5 engine is used in any case.
anychart.RenderingType.FLASH_PREFERRED	Flash is the first option if both Flash and HTML5 are available.
anychart.RenderingType.SVG_PREFERRED	HTML5 engine is the first option if both Flash and HTML5 are available.

　　如果设置FLASH_ONLY，你需要安装Flash Player来显示图表：

　　AnyChart.renderingType = anychart.RenderingType.FLASH_ONLY;

　　如果你设置SVG_ONLY，需要添加JavaScript和SVG 支持：

　　AnyChart.renderingType = anychart.RenderingType.SVG_ONLY;

　　如果你设置FLASH_PREFERRED，即使SVG显示可以用，flash版本也会优先于SVG。

　　AnyChart.renderingType = anychart.RenderingType.FLASH_PREFERRED;

　　相反，如是设置的SVG_PREFERRED，即使Flash版本可以用，也会优先使用SVG 版本。

　　AnyChart.renderingType = anychart.RenderingType.SVG_PREFERRED;

　　四、支持的绘图类型

Plot type	Flash	JavaScript (HTML5)
CategorizedVertical	+	+
CategorizedBySeriesVertical	+	+
CategorizedHorizontal	+	+
CategorizedBySeriesHorizontal	+	+
Scatter	+	+
Pie	+	+
Doughnut	+	+
Funnel	+	+
TreeMap	+	+
HeatMap	+	+
Polar	+	not yet
Radar	+	not yet
Map	+	not yet

　　五、JavaScript（HTML 5）版本支持的图表类型

Chart type
Column / Range Column / Stacked Column / 100% Stacked Column	+
Bar / Range Bar / Stacked Bar / 100% Stacked Bar	+
Line / Step-Line	+
Spline	not yet
Area / Range Area / Step-Line Area	+
Stacked Area / 100% Stacked Area / Stacked Step-Line-Area / 100% Stacked Step-Line-Area	+
Spline Area / Range Spline Area / Step-Spline Area	not yet
Stacked Spline Area / 100% Stacked Spline Area / Stacked Step-Spline-Area / 100% Stacked Step-Spline-Area	not yet
Pie / Doughnut	+
TreeMap	+
HeatMap	+
Funnel Chart	+
Pyramid Chart	+
Candlestick / Stock(HLOC) Chart	+
Dot/Marker Chart	+
Radar	not yet
Polar	not yet
Dashboards	+
Gauge	linear types only

　　注：HTML5版本尚不支持3D模式。

　　六、JavaScript（HTML 5）版本中的特征

Axes	+
Title	+
Position	+
Labels	+
Tickmarks	+
Line	+
Grid	+
Dash grid	+
Interlace grid	+
Extra axes	+
Date time axes	not yet
Major interval	+
Minor interval	+
Linear scale	+
Logarithmic scale	+
Stacked	+
Percent stacked	+
Overlay	+
Sorted overlay	not yet
Min Max settings	+
Inverted scale	+
Crossing scale	not yet
Base axis scale value	+
Label Background	+
Label position	not yet
Label rotation	+
Label stager	+
Custom lines (trends)	not yet
Custom labels	not yet
Custom Ranges (areas)	not yet
Axis Labels	+
Enable|Disable label	+
Formatting labels	+
Font settings	+
Multiline	+
Tooltips	+
Enable|Disable tooltips	+
Formatting tooltips	not yet
Position tooltips	+
Background & effects	+
Tooltips style	+
Extra tooltips	+
Data labels	+
Enable|Disable	not yet
Formatting	+
Custom attributes	+
Rotation	+
Background & effects	+
Style	+
Extra labels	+
General settings	+
Background Solid	+
Background gradient	+
Background Image	not yet
Hatch fill (without Percent types)	+
Resources	not yet
Corners	+
Inside margins	+
Effects	not yet
Line gradient	+
Line opacity	+
Line solid	+
Line thickness	+
Dashed line	+
Caps & Joins	+
Color HEX	+
Color RGB	+
Color HSB	+
Color Web	+
Color Transformation	+
LightColor	+
DarkColor	+
Blend	+
Effects shadow	not yet
Effect bevel	not yet
Effect glow	not yet
Effect blur	not yet
Effect inner shadow	not yet
Effect inner glow	not yet
Change fonts	+
International Symbols Support	+
HTML formatting	not yet
HTML tags	not yet
Text Rotation	+
Text Effects	not yet
Color Palettes	+
apply_palettes_to	not yet
Templates	not yet
Internal Templates	not yet
External Templates	not yet
Controls	+
Chart title	+
Chart subtitle	+
Chart footer	+
Color swatch	not yet
Navigation panel	not yet
Zoom panel	not yet
Map moving panel	not yet
Multiple titles	not yet
Custom labels	not yet
Custom images	not yet
Actions	not yet
Legend	+
Legend tokens	not yet
Enable|Disable Legend title	+
Markers Symbols to Series Icon	not yet
Legend size	+
Legend position	+
Legend float	not yet
Items formatting	not yet
Background	+
Auto items	+
Custom items	+
Items separators	+
Custom attributes	+
Multiple Legend	not yet
Extra legends	not yet
Data thresholds	+
Custom thresholds	+
Legend thresholds	not yet
Automatic thresholds	not yet
Animation	not yet
Context Menu	not yet
Enable|Disable	not yet
Localization	not yet
Saving charts	+
Printing charts	+
Interactivity	+
item states	+
item actions	not yet
Using CSV Data	not yet

下载Anychart试用版：