AnyChart图表个人总结.doc

AnyChart图表个人总结

1、AnyChart介绍
AnyChart是一种先进的基于flash的数据可视化的解决方案，是用于构建复杂报表的理想工具，AnyCharts使用XML作为通用数据接口，这样我们就能够从任何数据源中使得数据可视化。AnyChart是完全跨浏览器和跨平台的。很多种理由让你选择AnyChart解决方案：（1）图表好看、动画；（2）交互性强；（3）跨平台；（4）不需要安装、基于XML技术。接下来看一个具体的简单的图表（图1）：

图1、水平直方图
2、AnyChart数据的设置
2.1获得数据（getData）
AnyChart通过配置XML文件获得任何数据源的数据。
举例：
<data>
<series name="Sales" type="Bar">
<point name="John" y="10000" />
<point name="Jake" y="12000" />
<point name="Peter" y="18000" />
<point name="James" y="11000" />
<point name="Mary" y="9000" />
</series>
</data>
<data />用来存数据的，<series />序列：数据集，<point />单条数据。
2.2用csv_data
csv数据：
<data_sets>
<csv_data_set name="simpleDataSet"> <![CDATA[
P1,174,5854,3242
P2,197,4171,3171
]]>
</csv_data_set>
</data_sets>
使用这个数据： 
<series name="Series 2" type="Bar" data_source="CSV">
<csv_data_mapping data_set="simpleDataSet">
<field column="0" name="name" />
</ csv_data_mapping>
</series>
3、AnyChart实现一个简单图表
实现一个简单的图表，需要建一个工程，目录可如下：

其中需要一个swf文件，一个js文件，一个html文件，一个xml文件。
swf文件主要是用来解析xml文件的数据格式生成图表，AnyChart提供了很多种的swf文件。
js文件用来处理html数据的一些解析和一些数据操作的处理，AnyChart提供了一个AnyChart.js文件。
xml文件：实现数据的可视化。
html文件：显示图表的网页。
具体的实现代码：可参考官方网站提供的事例。
4、图表的基本类型
图表的基本类型主要大类有：折线图，散点图，堆积图，饼状图和圆圈图，气泡图，锥形图和漏斗图，热区图，雷达图，极性图。
折线图有：面积图（Area Chart）、条线图（Bar Chart、Line Chart）、圆柱图（Column Chart）、圆锥图（Cone Chart）、圆筒图（Cylinder Chart）、金字塔图（Pyramid Chart）、标记图（Marker Chart）、
散点图有：散射线图（Scatter Line）、分散气泡图（Scatter Bubble）、
堆积图有：按百分比堆积图和按值堆积图（Percent Stacked Chart 和 Stacked Chart）
饼状图和圆圈图有：Pie/Doughnut Chart
气泡图有：Bubble Chart
漏斗图和锥形图有：Funnel/ Pyramid Chart
热区图有：HeatMap Chart和TreeMap Chart
雷达图和极性图有：Radar Chart 和Polar Chart
这些图表都有共性：基本上都有轴，有序列，能够设置轴的一些属性（像方向，是否倒置，最大值和最小值），能够设置风格（Styles），标签，提示工具、用标记，用色彩调色板，用填充和填充调色板。都能设置多序列数据和图例。
4.1 Area Chart
面积图由轴和序列数据构成，一个轴是数字轴，一个轴是分类轴。
具体实现是：<series name="Sales" type="Area">其中type为Area，就能建立一个面积图，type可为Area、SplineArea，SplineArea是样条面积图。也可以这样建立一个面积图：通过设置<data_plot_settings default_series_type="Area"/>
<charts>
<chart plot_type="CategorizedVertical">
<data_plot_settings default_series_type="Area"/>
<data>
<series name="2004 Sales">
<point name="May" y="14000"/>
</data>
</charts>
轴（Axis）的设置：可设置轴的方向，是否倒置，最大值和最小值。
面积图可设置风格（Styles），标签，提示工具、用标记，用色彩调色板，用填充和填充调色板。
注意：轴的设置，风格设置，标签和提示工具，标记，色彩调色板，填充和填充调色板，后面距离说明。
4.2 Bar Chart 和 Column Chart
考虑用条形图时：（1）轴标签是长的；（2）表示的值是继续时间的。
条形图和柱状图的主要区别是：条形图是水平的，柱状图是垂直方向的。
条形图和柱状图：也是由轴和序列数据构成，轴也是一样的，建立一个他们，设置为：
<series name="Year 2003" type="Bar">，设置type为Bar，水平的则为条形图，垂直的则为柱状图，具体的设置： <chart plot_type="CategorizedHorizontal">，其中plot_type设置值的不同，可设置水平和垂直的，CategorizedHorizontal和CategorizedVertical分别为水平和垂直的，同时也可以像面积图一样设置成：<data_plot_settings default_series_type="Bar"/>也可以。条形图和柱状图还设置成3D图的，设置<data_plot_settings enable_3d_mode="True">中enable_3d_mode的值为true就行。还能设置包含Z轴的3D图，在设置包含Z轴的3D图时要注意：除了设置<data_plot_settings default_series_type="Bar" enable_3d_mode="True" z_aspect="0.7" z_padding="0.3">，还要记得设置：<y_axis> <scale mode="Overlay" /></y_axis>
条形图和柱状图也能设置轴的一些属性，能调整条形之间的距离和条形组之间的距离：通过设置<data_plot_settings>子节点<bar_series>中的point_padding和group_padding的大小调整。
条形图和柱状图同样能设置风格（Styles），标签，提示工具、用标记，用色彩调色板，用填充和填充调色板。
4.3 Bubble Chart
气泡图：两轴和序列数据，其中两轴可为：一数值轴，一分类轴，就是折线图；当两轴都是数值轴时，也就变成了分散图，也就是分散气泡图。
建立一个气泡图：设置<series>中type为Bubble，
 <series name="ACME" type="Bubble">
    <point name="Product A" y="637" size="6" />
</series>
其中y值代表数字轴上的位置，size为气泡大小。其中可设置气泡的控制大小，具体设置在<data_plot_settings>中子节点<bubble_series>中的maximum_bubble_size和minimum_bubble_size的值。有时候可能气泡之间能造成一个气泡遮住了另一个气泡（也就是气泡重叠），为了防止气泡重叠，可设置：<y_axis scale mode="SortedOverlay" ></y_axis>
气泡图同样能设置风格（Styles），标签，提示工具、用标记，用色彩调色板，用填充和填充调色板，轴。
4.4 Cone Chart、Cylinder Chart 和 Pyramid Chart
他们同样也是由两轴（一个数字轴，一个分类轴）和序列数据构成。
建立：设置<series type="Bar" shape_type="Cone">，其中shape_type为Cone、Cylinder、Pyramid，则分别为圆锥图、圆筒图和金字塔图。
他们能设置3D的（参考条形图的设置），还能设置堆积图（下面再说明）。
他们同样能设置风格（Styles），标签，提示工具、用标记，用色彩调色板，用填充和填充调色板，轴。
4.5 Japanese Candlestick Chart和Open High Low Close (OHLC) Chart
烛台图和高低图：同样两轴和序列数据。
主要使用情况在股票的一些图中。
建立：设置<series name="ACME" type=" Candlestick ">则为烛台图，<series name="ACME" type="OHLC">则为高低图。他们中<point>有几个属性：open, high, low, close。
他们同样能设置风格（Styles），标签，提示工具、用标记，用色彩调色板，用填充和填充调色板，轴。
4.6 Line Chart
线条图：同样两轴和序列数据。
建立：设置<series name="Sales" type="Line">。其中type可设置两值：Line，Spline，StepLineForward和StepLineBackward。其中设置StepLineForward和StepLineBackward两者的区别是：图表的显示不同，下图中左边是StepLineForward图，右边是StepLineBackward图，也就是StepLineForward图中线是从前往后连的线，StepLineBackward图中的线是从后往前连的线。

同样，线条图也能设置风格（Styles），标签，提示工具、用标记，用色彩调色板，用填充和填充调色板，轴。
4.7 Marker Chart
标记图：两轴和序列数据
建立：<series name="Box office" type="Marker">。
同样，标记图也能设置风格（Styles），标签，提示工具、用标记，用色彩调色板，用填充和填充调色板，轴。
4.8 Stacked Chart
堆积图：其中有按百分比堆积，数值堆积的面积堆积图/条形堆积图/柱状堆积图，主要是在基本图的基础上堆积的。
设置<y_axis> <scale mode="PercentStacked" /> </y_axis>中的mode为PercentStacked，则为按百分比堆积，mode为Stacked，则为按值堆积。
同样堆积图也能设置风格（Styles），标签，提示工具、用标记，用色彩调色板，用填充和填充调色板，轴。
4.9 Pie/ Doughnut Chart
饼状图和环形图：考虑用单一饼状图和环形图的情况：(1)只有一组数据；（2）没有数据值为负；（3）数据没有为0的；（4）数据类别不要太多（不要大于7个）；（5）数据类别是整体的部分。
建立：设置<chart plot_type="Doughnut">其中，plot_type为Pie时为饼状图，plot_type为Doughnut时为环形图。
Pie/Doughnut能够设置成3 D的，同样也能设置风格（Styles），标签，提示工具、用标记，用色彩调色板，用填充和填充调色板。
4.10 Range Chart
变化范围图：主要有：变化区域范围图和变化柱状/条状/圆筒范围图。
建立：设置<series type="RangeArea">，其中type为RangeArea时为区域范围变化图，type为RangeSplineArea时为区域齿状范围变化图；同时设置<series type="RangeBar">时为线条范围变化图，<series type="RangeBar" shape_type="Cylinder"> 其中shape_type为不同的值，则为不同的范围变化图，其中shape_type可选值：Box 和Cylinder。
变化范围图：具体的还有一些设置<range_bar_series>中的子节点<start_point>和<end_point>。
4.11 Scatter Chart
分散图：两轴（不过两轴都是数值轴）和序列数据。有散射线图、分散气泡图和分散标记图。
建立：设置<chart plot_type="Scatter"></chart>其中plot_type为Scatter则为分散图，具体到某种形状的图，要设置： <series color="Red" type="Bubble">，type可为：Line，Bubble，Marker，其中<point>中x，y都是数值。
同样分散图也能设置轴，运用标签和提示工具。
4.12 Funnel Chart
漏斗图：两轴和序列数据
建立：设置<chart plot_type="Funnel">，plot_type为Funnel，其中<funnel_series>中有以下几个属性：neck_height，min_width，padding，min_point_size，fit_aspect，inverted，这些参数的具体使用请查看AnyChart官方手册中漏斗图那一章节，为3D时还有一个mode（方还是圆）属性设置。
漏斗图同样可设置成3D，可使用标签和提示工具，可设置轴。
4.13 HeatMap和TreeMap
热区图和树图：两轴和序列数据。
建立：设置<chart plot_type="HeatMap">，plot_type不同，则为不同的图，可为：HeatMap和TreeMap。同样其他可设置的部分和大多数图表一样。
热区图：以特殊高亮的形式显示访客热衷的页面区域和访客所在的地理区。树图：树图显示矩形数据层次结构，树的每一个分支是一个树，然后跟较小的矩形树组成一个树图，矩形的叶节点面积表示数据的维度。
4.14 Radar Chart 和Polar Chart
雷达图

雷达图是财务分析报表的一种。即将一个公司的各项财务分析所得的数字或比率，就其比较重要的项目集中划在一个圆形的固表上，来表现一个公司各项财务比率的情况，使用者能一目了然的了解公司各项财务指标的变动情形及其好坏趋向。雷达图主要应用于企业经营状况——收益性、生产性、流动性、安全性和成长性的评价。
极性图

极性图上的点坐标表示到原点的距离和轴的夹角，具体的一些东西参看官方手册。
雷达图和极性图：两轴和序列数据。
建立：设置<chart plot_type="polar">，其中plot_type为polar为极性图，为radar则为雷达图。
在<data_plot_settings>可设置图表的半径（radius）、开始角度，雷达图可设置使用极坐标。
两图可惊醒x轴，y轴的一些设置，同样也能使用标签，提示工具等其他。
其中极坐标：在平面内取一个定点O，叫极点，引一条射线Ox，叫做极轴，再选定一个长度单位和角度的正方向(通常取逆时针方向)。对于平面内任何一点M，用ρ表示线段OM的长度，θ表示从Ox到OM的角度，ρ叫做点M的极径，θ叫做点M的极角，有序数对 (ρ,θ)就叫点M的极坐标，这样建立的坐标系叫做极坐标系。

5、测量仪表
测量仪表有圆形，水平，垂直行三种，主要包含轴，指针。
测量仪表大致效果图如下：

可设置轴：轴角度（开始角度和角度范围），刻度标尺，轴标签（可自定义轴标签），轴刻度，颜色变化范围，刻度线，标尺线和标尺条，多轴。
设置指针（Pointers）：指针形状有标记指针，块状指针和条状指针，具体设置：<pointer type="needle" value="30" color="green">，type可为：needle，knob和marker。
特殊标签的设置，标签的节点结构：
<label>
   <position placement_mode="ByPoint" x="85" y="90" />
   <font size="15" />
   <format>"ByPoint"</format>
   <background enabled="false" />
</label>
框架的设置：
<frame enabled="true">
   <inner_stroke enabled="false" />
   <outer_stroke enabled="false" />
   <background enabled="true">
     <fill enabled="true" type="solid" opacity="0.5" color="#1E90FF" />
   </background>
</frame>
测量仪的位置设置和调整。
6、仪表板
效果图：

建立：
<anychart>
<dashboard>
<view type="Dashboard">
<title><text>Horizontal Split Layout Sample</text></title>
<hbox height="100%" width="100%">
<view type="chart" source="chart1" height="100%" width="50%"/>
<view type="chart" source="chart2" height="100%" width="50%"/>
</hbox>
</view>
</dashboard>
<charts>
<chart name="chart1"/>
<chart name="chart2"/>
</charts>
</anychart>
其中<dashboard><view type="Dashboard">< /dashboard>中type设置为dashboard。
仪表板布局设置：<hbox>或者<xbox>，模板布局有：2x2,3x3格子，1x3立式面板。
7、轴
轴基本设置（可设置多轴）：定义轴，标题，位置，标签，轴刻度线和零刻度线，刻度，网格（Grids）
定义轴： <axes><x_axis /><y_axis /></axes>
设置标题：<x_axis> <title /></ x_axis>
设置轴的位置：
<axes> 
<y_axis position="Opposite" />
   <x_axis position="Normal" />
</axes>
设置轴标签：<y_axis> <labels display_mode="Normal" /></y_axis>
设置轴刻度线和零刻度线：
<y_axis>
    <line color="Red" />
    <zero_line color="Red" />
 </y_axis>
上面主要设置了刻度线的颜色。
设置刻度：
<y_axis>
    <major_tickmarks enabled="True" outside="True" inside="False" opposite="False" />
    <minor_tickmarks enabled="False" outside="False" inside="True" opposite="False" />
 </y_axis>
其中major_tickmarks：最大刻度，minor_tickmarks：最小刻度。
设置网格：
<y_axis>
  <major_grid enabled="True" />
  <minor_grid enabled="True" />
</y_axis>
其中major_grid：最大网格，minor_grid：最小网格。
设置刻度值：
<y_axis>
  <scale type="Logarithmic" log_base="10" />
</y_axis>
其中<scale/>用来设置刻度值类型的。
轴还有一些设置：设置时间轴，自定义标签，自定义区域。
8、标签和提示工具
提示工具和格式化
<bar_series>
   <tooltip_settings enabled="true">
<format>Series name: {%SeriesName}
Point name: {%Name}
Point value: {%YValue}
</format>
  </tooltip_settings>
</bar_series>
其中能够自定义一些属性值。
标签和格式化：和提示工具差不多
<bar_series>
 <label_settings enabled="true">
     <format>{%Name}/{%YValue}</format>
 </label_settings>
</bar_series>
9、基本的外观设置
主要从以下几个方面进行设置：图表背景、线和边、图表标题、字体、效果、色彩管理、调色板。
设置背景：<chart_background>子节点<border>,<fill>, <border>, <hatch_ fill>, <corners> 和<inside_margins>这些节点进行设置。具体：
<chart_background>
<fill type="Image" image_mode="Stretch" image_url="image_fill.jpg" opacity="0.2"/>
<border enabled="false"/>
<corners type="Square"/>
</chart_background>
设置线和边：
边设置：<border type="Solid" color="Red" thickness="2" opacity="0.8" caps="None" joints="Round" />
线设置：<line color="White"/>其中<line>中还有其他的属性：thickness，opacity等。
字体设置：<font family="Verdana" color="Black" size="12" bold="True" italic="False" underline="False" render_as_html="False" />
效果设置：
<effects enabled="true">
   <drop_shadow enabled="true" color="White" distance="6" />
  <bevel enabled="true" />
</effects>
色彩管理：不同形式的色彩展示，通过设计，展示不同效果的色彩。
调色板：
简单的例子：
<palette name="SampleColorPalette" type="DistinctColors">
 <item color="AliceBlue" />  
<item color="RGB(250,235,215)" />  
<item color="HSB(160,100,75)" />  
<item color="#DEB887" />
</palette>
其中<palette>中type值有几个值可供选择，调色板可设置梯度值（gradient）
10、模板和风格
模板
生成模板：
<template name="Bar Chart With No Title #1">
    <chart plot_type="CategorizedHorizontal">
<chart_settings>
        <title enabled="false" />
        <axes>
          <y_axis />
                   <x_axis />            
   </axes>    
</chart_settings>
   </chart>
</template>
调用（申请）模板：
<anychart>
  <charts>
    <chart template="Bar Chart With No Title #1">
      <data>
        <series name="Year 2003" type="Bar">
        </series>
       </data>
</chart>
 </charts>
</anychart>
风格
生成风格：
<styles>
    <bar_style name="Style 1">
<states>
        <normal>
          <fill enabled="true" type="solid" color="DarkBlue" />
       </normal>
      <hover>
         <fill enabled="true" type="solid" color="aqua" />
       </hover>
     </states>
   </bar_style>
</styles>
调用（申请）风格：
<point name="Point 1" y="637166" style="Style 1" />
11、控制和定位控制
主要有图表标题，图例，自定义的标签的一些设置。
图例：设置<legend>节点的属性就行
<chart_settings>
  <legend enabled="True" ignore_auto_item="True">
<format>{%Name} - {%Value}</format>
    <items>
      <item source="Points" />
    </items>
  </legend>
</chart_settings>
图表标题：设置<chart_settings>子节点<title />的一些属性。
自定义标签：和一般的标签使用差不多。
注意：我们可以设置多图例，多标题。
12、数据阈值（Thresholds）
自定义的：
<chart>
<thresholds>
<threshold name="SampleThreshold">
<condition name="Excellent Rating" type="greaterThanOrEqualTo" value_1="{%YValue}" value_2="10000" color="Red" />
</threshold>
</thresholds>
</chart>
如果是自定义的，需在<thresholds>中添加子节点<threshold>并设置其属性。
自动的：
同样是设置：<thresholds>中添加子节点<threshold>，具体：
<thresholds>
<threshold name="SampleAutoThreshold" type="EqualSteps" />
</thresholds>
其中type类型有：EqualSteps，Quantiles，AbsoluteDeviation，defaut
13、数字日期的格式化
具体：<text><![CDATA[{%Value}{maxChar:5,maxCharFinalChars:}]]></text>
格式化参数：{%KeywordName}{Param:value}（前面是关键名，后面是参数值）
可设置数字位数，小数点后几位，更改小数点位数。同样日期也是差不多，
14、动画
AnyChart可设置出按不同效果组合的动画效果。
具体设置<animation>中一些属性就能得到不同的效果
<anychart>
<settings>
<animation />
</settings>
</anychart>
还能设置组合的动画。
15、AnyChart其他的一些功能
能设置：上下文菜单，把图表保存为图片和PDF文件，打印图表，还能嵌入PPT。
效果如下图：

具体设置：
设置上下文菜单：<context_menu>这个节点的属性进行设置。
<anychart>
<settings>
<context_menu save_as_image="false" />
</settings>
</anychart>
保存文件：
<anychart>
<settings>
<image_export url="http://localhost/AnyChartPNGSaver.jsp" />
</settings>
</anychart>
上面是保存为图片，注意：url为作为处理的一个脚本文件，可对保存的图片进行封装处理。
<settings>
<pdf_export url=" file_name="anychart.pdf" use_title_as_file_name="false" image_type="jpg" />
</settings>
上面是保存为PDF文件，url同样是用来处理的。
打印图表和嵌入PPT具体看AnyChart官方手册，嵌入PPT操作还不是很难。