AnyChart是基于JavaScript (HTML5) 的图表控件。使用AnyChart控件，可创建跨浏览器和跨平台的交互式图表和仪表。AnyChart图表目前已被很多知名大公司所使用，可用于仪表盘、报表、数据分析、统计学、金融等领域。

AnyChart 可以被用于Web、桌面和移动应用程序，AnyChart 可运行于当前PC和Mac上所有主流的浏览器，如：Chrome, Safari, Firefox, Internet Explorer 和 Opera，并且可用于所有移动平台(Android (2.2+) 和 iOS (iPhone, iPad, iPod Touch). )上的主流浏览器。

柱状图是项目中最常用的图形之一，他的指标在X轴方向，每个指标对应的值在Y轴，Anychart的柱状图支持2D和3D效果。

如下代码片段，是一个简单的柱状图的XML配置，要生成一个柱状图，你就必须配置的plot_type属性为"CategorizedVertical"，并且要配置标签的属性default_series_type为"Bar"，这样整个图就是柱状了。

Xml代码

1.
2.
3.? 
4.??? 
5.????? 
6.??????? 
7.????????? 
8.??????? 
9.????? 
10.????? 
11.??????? 
12.????????? 
13.????????? 
14.????????? 
15.????????? 
16.????????? 
17.??????? 
18.????? 
19.??? 
20.? 
21.

条形图其实是柱状图旋转后的效果，指标在Y轴了，而数据在X轴，同时条形图也支持2D和3D效果。

条形图的配置与柱状图也非常类似，你只需要把柱状图的plot_type属性修改为"CategorizedHorizontal"即可显示成条形图。

线形图分折线图和曲线图，常用于数据发展趋势分析。

看下面的代码片段，这是配置折线图的方法，你就必须配置的plot_type属性为"CategorizedVertical"，并且要配置标签的属性default_series_type为"Line"，这样整个图就是折线图了。那么如果你将plot_type属性设置成"CategorizedHorizontal"，结果也是折线，只是折线的指标在Y轴，而数据在X轴了。

1.
2.
3.? 
4.??? 
5.????? 
6.????? 
7.??????? 
8.????????? 
9.????????? 
10.????????? 
11.????????? 
12.????????? 
13.??????? 
14.????? 
15.??? 
16.? 
17.

曲线图与折线图配置类似，只需要将default_series_type属性修改为"Spline"即可，看下面代码

饼状图在项目中应用也很广泛，主要用于展示指标占用比例，Anychart的饼图也支持2D和3D两种。

饼图的代码如下，不同于前面几种图，饼状图只需要配置的plot_type属性为"Pie"即可。

1.
2.
3.? 
4.??? 
5.????? 
6.??????? 
7.????????? 
8.????????? 
9.????????? 
10.????????? 
11.????????? 
12.??????? 
13.????? 
14.??? 
15.? 
16.

圆环图也是非常简单，只需要配置的plot_type属性为"Doughnut"即可

介绍饼状图的一个特殊功能：Exploded Slices。饼图默认如果被点击的话，被点击的部分会伸出来突出显示。而且你也可以设置图形显示时默认突出显示哪一块或哪几块。

如下面的代码，我设置了point name为Department开头的和All开头的两个指标属性exploded为"true"，那么结果就是渲染饼图后，这两个被设置的指标突出向外显示了。

不过Anychart的饼图突出显示有一个不满意的地方就是你选择了一块突出显示后，再选择别的指标，原来被选择的指标不会自动收回。

另外有的用户不希望点击饼图时突出显示，则需要配置一个标签并且设置explode_on_click属性为"Flase"即可。另外explode属性是指突出显示多远，值越大突出显示得越远。

1.
2.
3.? 
4.??? 
5.????? 
6.??????? 
7.????????? 
8.????????? 
9.????????? 
10.????????? 
11.????????? 
12.??????? 
13.????? 
14.????? 
15.??????? 
16.????? 
17.??? 
18.? 
19.

标记图其实是指图上打小点这样的标记而组成的图，我的项目里用过一次，用于表示不同时间段用户登录次数和在线时长的。

废话不多说，先上XML，看下面的代码：其中是可以不用写的，这里写了就给大家做个解释，的size属性表示标志在图上的默认大小，而下面的marker size是标识鼠标移动到标志上时标志显示的大小，下面代码从10变成20有一种放大的效果。

而设置标志图的代码也只有两块，一块是设置plot_type另一块是设置default_series_type为"Marker"即可。

1.
2.
3.? 
4.??? 
5.????? 
6.??????? 
7.????????? 
8.??????????? 
9.??????????? 
10.????????????? 
11.??????????????? 
12.????????????? 
13.??????????? 
14.????????? 
15.??????? 
16.????? 
17.????? 
18.??????? 
19.????????? 
20.????????? 
21.????????? 
22.????????? 
23.????????? 
24.????????? 
25.????????? 
26.??????? 
27.????? 
28.??? 
29.? 
30.

面积图的配置与前面的也是非常类似的，除了配置plog_type以外，再配置default_series_type即可，如下所示。

雷达图的应用场景通常是统计某个人的多维能力值，通过雷达图能很形象看出这个人的擅长和需要弥补的地方。

雷达图的配置也是非常简单，用户只需要配置标签的plot_type属性为Radar即可

1.
2.
3.? 
4.??? 
5.????? 
6.??????? 
7.????????? 
8.????????? 
9.????????? 
10.????????? 
11.????????? 
12.????????? 
13.??????? 
14.????? 
15.??? 
16.? 
17.

雷达图有很多种样式，雷达图点与点之间是通过直接连接的，如果希望以曲线连接则需要设置标签的 use_polar_coords属性为"true"，如下代码

1.
2.
3.? 
4.??? 
5.????? 
6.??????? 
7.????????? 
8.????????? 
9.????????? 
10.????????? 
11.????????? 
12.????????? 
13.??????? 
14.????? 
15.????? 
16.??????? 
17.????? 
18.??? 
19.? 
20.

那么如果你希望你的雷达图中的连线像面积图那样显示，那么可以像下面这样在标签增加一个type属性"Area"

当然，Anychart的雷达图支持的效果不止这些，如果需要更多的样式，请参见官方的帮助文档

堆叠图（柱状为例）（Stacked Bar/Column Chart）

Anychart支持柱状的堆叠和面积图的堆叠，这里就只介绍柱状的堆叠，面积的堆叠与之类似。当然也可以参见官方的帮助文档：

下面是一个简单的堆叠图，需要注意的是堆叠图比如是存在多个series的，每个series你可以当作一组分类，每个series下的point指标数量都是相同的，并且他们的name一一对应，最后你看到的效果就会是相同name的指标堆叠在一起了。

柱状堆叠图与常规的柱状图唯一的区别就是在标签下有一个，这个标签决定了柱状图是以堆叠还是以常规显示。

1.
2.
3.? 
4.??? 
5.????? 
6.????? 
7.??????? 
8.????????? 
9.????????? 
10.????????? 
11.????????? 
12.??????? 
13.??????? 
14.????????? 
15.????????? 
16.????????? 
17.????????? 
18.??????? 
19.??????? 
20.????????? 
21.????????? 
22.????????? 
23.????????? 
24.??????? 
25.????? 
26.????? 
27.??????? 
28.????????? 
29.??????????? 
30.????????? 
31.??????? 
32.????? 
33.??? 
34.? 
35.

最后我们看相同data的情况下，堆叠图和常规柱状图的效果：

本站文章除注明转载外，均为本站原创或翻译