amcharts是什么？
前端开发过程中经常会遇到图表展示的需求，这里我们往往会借用成熟的外部组件来尽快的投入到项目的开发中去。现有的主流的图表组件有很多，amcharts就是其中一个。
amCharts 是一款高级图表库，致力于 Web 之上的数据可视化支持。它支持的图表包括柱状图、条状图、线图、蜡烛图、饼图、雷达、极坐标图、散点图，甚至连燃烧图、金字塔图，都有支持。amCharts 库是一款完全独立的类库，不依赖任何其他第三方类库，就可以在网站上运行。该类库支持两个版本，商业授权版本和免费版本（在图上显示 amCharts 的商标和链接）。
总之，我们在经过调研后，结合项目需求等内因外因选择了amcharts这个组件。amcharts满足了产品大部分的需求。但是很多地方需要定制。那在解决这些特殊需求的过程中，这里我来总结一下amcharts在使用过程中需要注意的地方。希望能在大家开发学习过程中有所帮助。
免费 vs 样式需求
前面提到，amcharts有免费版本和商业授权版本。在开发过程中我们选择的是免费版本。但是产品需求是要按照UED提供切图中图表样式进行展示。显然UED是不会在示意图中增加“JS chart by amCharts”这个链接的。我们又不能将其去掉（涉及版权问题），所以经过协商，需要调整这个链接的位置。
打开amcharts.js，可以看到都是压缩过的代码。可以搜索“JS chart by amCharts”，只有一个结果，这个结果附近的代码设置了这个链接相关信息。amcharts中设置了可配参数定位这个链接，所以一般情况下可以在开发过程中直接配置。但是由于我们的需求要求定制位置，所以需要修改位置的值。右下角是通过“bottom-right”来确定位置。搜索它结果唯一。这里我们将“m=d-f-3”改成“m=d-f+37”。另外在引用amcharts时设置”creditsPosition”:”bottom-right”。
定制图表样式
默认的amcharts显然不能满足需求，所以图表中坐标的粗细，颜色，透明度，包括里面线段，柱状图等等的样式都需要进行重新设置。如下图所示是最终效果。
在工程中，这种全局的图表样式设置在一个全局变量中设置，在各个图表的创建时引用全局样式配置。配置代码如下：
这里特别介绍下一些配置项：
path：配置amcharts中使用的图片存放路径。
fontFamily：默认字体
fontSize：默认字号
chartCursor：鼠标移动的动态效果设置。categoryBalloonEnabled：mouseover时是否在x轴上出现弹泡。cursorAlpha：垂直于x轴的各个点的坐标线的透明度，这里设置为0让其不显示。graphBulletSize：表示值的点mouseover时放大（缩小）的倍数。graphBulletAlpha：表示值的点mouseover时的透明度。
categoryBalloonEnabled为true时效果：
cursorAlpha为1时效果：
graphBulletSize为3时效果：
graphBulletAlpha为0.2时效果：
categoryAxis：x轴的坐标设置。
parseDates：是否按照默认格式转换日期。
color：坐标值的颜色。
gridAlpha：x坐标垂直线的透明度
parseDates为true时效果：
color为red时效果：
gridAlpha为1时效果：
balloon：值在mouseover时出现的弹泡的设置。
borderThickness：弹泡边框厚度。
verticalPadding：弹泡在垂直方向的padding值。
textAlign：文字对齐方向，默认居中。
maxWidth：弹泡的最大宽度。
borderThickness为3时效果：
verticalPadding为30时效果：
textAlign为right时效果：
creditsPosition：前面已经说过，是“JS chart by amCharts”这个链接的位置。
export：导出功能。这里我们仅仅定义了可用和位置。详细的功能可以参考官网，在本项目中深入使用。
一些特殊用法
以上的基本定制内容在官网上都能找到。但是由于产品需求的特殊性，我在开发过程中还遇到了一些特殊用法。
弹泡内容定制：按照需求多条折线在同一个x轴下弹泡只展示一个，并且把所有点的信息集中在该弹泡里。最简单的做法是后端将数据处理成这种格式，这里讨论前端控制方法。将曲线图参数graphs数组中balloonText设置为””，则自动mouseover后不展示弹泡。通过逻辑生成全部信息的弹泡内容，设置graphs[0]即可。
标题定制：在图表最下方对每条线进行了描述，这里不只是展现限定长度的标题内容，还需要完成鼠标移动到标题部分展现弹泡。在官网上没找到可以直接设置的设置项，多方调研，最后是这么解决的。在曲线图参数graphs数组中增加一个自定义命名项，值为mouseover后需要展示的定制弹泡内的内容。在使用this.chart = AmCharts.makeChart创建图表后，进行事件绑定。事件绑定方法为：this.chart.legend.addListener(“rollOverItem”, function(){xxx})。如下图示，是需求效果。
小结
amcharts是一个很漂亮的图表组件，功能也十分强大，还有很多功能我们没有使用，等待我们研究使用。之前版本的amcharts使用一般是直接创建，并使用函数逐个配置。新版的从官网的demo就可以看出，推荐使用使用一个比较大的配置项，直接创建生成。写法和美观程度不同，功能却大致相同，另外样式包括默认样式有一些变化。总之，amcharts是一个值得推荐的图表组件。
