Anychart图表系列十之增值功能

本章的信息量可能会很大，而且会不断更新，标题说的“增值功能”由多个小功能组成，因为每个小功能内容都不多不能成篇，所以统一在本章介绍。

 

•  右键菜单

以Flash效果渲染的图形，可以通过鼠标右键查看到右键菜单，默认的右键菜单功能包括：版本提示、另存为图片、另存为PDF和打印图表。

上图是默认的右键菜单样式，同时AnyChart提供了菜单的自定义配置。用户可以取消显示指定菜单项，也可以修改菜单的文字内容。

位于<settings>标签下的<context_menu>用于控制右键菜单，该标签支持以下属性用于控制是否显示指定菜单项。

 <context_menu>标签下包含三个子标签用于设置右键菜单的文字内容，具体代码如下

<?xml version="1.0" encoding="UTF-8"?>
<anychart>
  <settings>
    <context_menu version_info="false" about_anychart="false">
      <save_as_image_item_text><![CDATA[另存为图片 >>>]]></save_as_image_item_text>
      <print_chart_item_text><![CDATA[打印 >>>]]></print_chart_item_text>
      <save_as_pdf_item_text><![CDATA[导出PDF >>>]]></save_as_pdf_item_text>
    </context_menu>
  </settings>
</anychart>

 

• 导出图片

在右键菜单的内容中讲到AnyChart菜单项支持导出图片，这是导出图片最简单的方式，不过很奇怪的是，这种方式似乎必须放在服务器上才有效，我从官方下载例子到本地，然后尝试导出无效，而在项目中图片的导出是正常的。当然，这种方式是默认的配置，开发人员还可以通过修改XML配置来自定义导出功能。

图片导出的标签是<settings>标签下的<image_export>，url属性表示导出图片时访问的页面，通过访问该页面的代码即可生成指定的图；其他属性一看就懂，不用解释了。

<?xml version="1.0" encoding="UTF-8"?>
<anychart>
  <settings>
    <image_export url="http://localhost/saveasimage/AnyChartPNGSaver.jsp" file_name="weekly_report" use_title_as_file_name="true" width="1024" height="800"/>
  </settings>
</anychart>

 AnyChart提供URL的形式来生成图片非常有意思，我仔细看了JSP的代码逻辑，其实JSP的作用就是通过java解析出base64字节流，然后通过response.getOutputStream().write(byte)将图片对象导出。（详细代码可参考官方示例）

<%
  String contentType = request.getParameter("contentType");
  String fileName = request.getParameter("fileName");
  
  if (contentType != null && !contentType.equals(""))
	response.setContentType(request.getParameter("contentType")); 
  else
	response.setContentType("image/png"); 
  
  if (fileName != null && !fileName.equals("")) {
    response.setHeader("Content-Disposition", "attachment; filename=\""+request.getParameter("fileName")+"\"");
  }
  
  response.getOutputStream().write(decodeBase64(request.getParameter("file")));
%>

 另外AnyChart还提供了通过js执行图片保存的方法，用起来也非常简单（注：只有Flash图才能保存图片，HTML5无效）

<script type="text/javascript" language="javascript">
AnyChart.renderingType = anychart.RenderingType.FLASH_ONLY;
var chart = new AnyChart();
...
//保存图片
chart.saveAsImage();
</script>

 

•  打印图片

打印图片也提供了js方法：chart.printChart()，执行该js后AnyChart会调用当前浏览器的打印功能执行图片打印，用法跟保存图片一样，这个不用多说。

另外可能有的项目会自己封装打印功能，即先显示一个打印预览页面，然后再打印页面的内容，因为如果是Flash图是无法再预览页面显示的，所以需要对图表进行一下转换，具体做法可以访问我另一篇文章《AnyChart-Flash图转IMG普通图的方法》

 

•  导出PDF

通过AnyChart导出PDF也是非常简单，AnyChart同样提供了XML配置来设置导出功能

<settings>
  <pdf_export url="http://www.anychart.com/products/anychart/saveas/pdf/PDFSaver.php" file_name="anychart.pdf" use_title_as_file_name="false" image_type="jpg" />
</settings>

 除此之外，AnyChart也支持通过javascript调用导出PDF操作：chart.saveAsPDF()，开发可以非常方便地调用。

 

• 图动画Animation

AnyChart支持图动画效果（HTML5时赞不支持），并且动画效果非常丰富，用户可以随意配置自己喜欢的效果。

首先要开启动画效果，可按照下面配置显示一个默认的动画：

<?xml version="1.0" encoding="UTF-8"?>
<anychart>
  <settings>
    <animation enabled="True" />
  </settings>
</anychart>

动画效果影响范围分为三个级别：全局动画、series动画和point动画。

全局动画的属性只有三个 ：

 

而series动画和point动画的属性基本一致，只是影响范围不同

 

下面给一个官方的例子，看下不同级别动画效果是如何出来的：

<?xml version="1.0" encoding="UTF-8"?>
<anychart>
  <settings>
    <animation enabled="true" />
  </settings>
  <charts>
    <chart>
      <data>
        <series name="Sales" type="Bar" palette="Default">
          <animation enabled="false" />
          <point name="2000" y="10000">
            <animation enabled="true" start_time="0" duration="1" start_angle="360" animate_opacity="False" />
          </point>
          <point name="2001" y="12000" />
          <point name="2002" y="18000">
            <animation enabled="true" start_time="2" duration="2" start_angle="360" animate_opacity="True" />
          </point>
          <point name="2003" y="11000">
            <animation enabled="true" start_time="1" duration="1" animate_opacity="True" />
          </point>
          <point name="2004" y="9000" />
        </series>
      </data>
      <chart_settings>
        <title enabled="false" />
        <axes>
          <y_axis>
            <title>
              <text>Sales</text>
            </title>
            <labels>
              <format>{%Value}{numDecimals:0}</format>
            </labels>
          </y_axis>
          <x_axis>
            <title>
              <text>Year</text>
            </title>
          </x_axis>
        </axes>
      </chart_settings>
    </chart>
  </charts>
</anychart>

 因为我只用了全局的动画，所以更详细的动画并未深究，大家想了解更多可以访问官方文档。

 

•  scale小配置

开发如果在数据很多的情况下可能会遇到两根甚至更多柱子占用一个背景格子的情况，最后导致的后果是point name在图中显示不全，如下图所示。

这个是有解决办法的，只需要在XML中设置一个这个标签即可解决问题。 

 

<x_axis>
<scale major_interval="1"/>
</x_axis>

 

 

• 文字换行和省略

接上一张图，大家可以看到point name在过长的时候进行了换行，超过指定字数以“...”显示，这个配置也是支持的，看下面的XML，<labels>的width属性表示文字达到指定宽度则换行，rotation属性表示将文字旋转一定角度，而<format>标签下有一个内置变量maxChart则表示最多允许显示多少个问题，如果超出则将多余的以maxCharFinalChars的格式显示。

<x_axis>
  <labels enabled="true" width="5" rotation="90" display_mode="rotated" align="Inside">
    <format><![CDATA[{%Value}{maxChar:15,maxCharFinalChars:...}]]></format>
  </labels>
</x_axis>

 

• 自定义颜色

AnyChart图表的各个部位都支持自定义颜色，不同部位需要不同的标签，配置颜色的属性都叫color，以最常见的自定义柱状图柱子颜色为例，可以在series中设置color属性，也可以在point中设置color，同时AnyChart支持多种颜色格式。具体图颜色可以参考官方提供的Color Table。

<?xml version="1.0" encoding="UTF-8"?>
<anychart>
  <charts>
    <chart plot_type="CategorizedVertical">
      <data>
        <series name="Sales" type="Bar" color="#FF8C00">
          <point name="John" y="10000" color="Beige"/>
          <point name="Jake" y="12000" color="rgb(240,248,255)"/>
          <point name="Peter" y="18000" color="hsb(0,59,41)"/>
          <point name="James" y="11000" color="#00FFFF"/>
          <point name="Mary" y="9000" />
        </series>
      </data>
    </chart>
  </charts>
</anychart>

 

• 图边框和边距

AnyChart默认有一个蓝色边框，这个边框是可以设置样式或者隐藏的，下面XML是隐藏蓝色边框，如果想了解更多，可参考官方文档。

<chart_settings>
  <chart_background enabled="true">
    <border enabled="true">
      <fill enabled="false" />
    </border>
  </chart_background>
</chart_settings>

另外隐藏蓝色边框后，图的边距最好再调整一下，这样可以提高图的使用有效率：

<anychart>
  <margin all="-10"/>
</anychart>

 

• 字体设置

AnyChart支持各个部位设置字体样式，跟自定义颜色类似，在很多主标签下都有一个<font>标签设置字体，而且属性也基本相同。我在项目中用得最多的是字体大小，下面是一个字体的属性设置。

<font family="Verdana" color="Black" size="12" bold="True" italic="False" underline="False" render_as_html="False" />

 除了通过属性调整字体样式以外，AnyChart还支持通过HTML标签设置字体样式，只要设置render_as_html属性为true，则可以在<format>中写HTML格式的内容：

<label_settings>
  <font render_as_html="True" />
  <format><![CDATA[%cbegin <b>Name:</b> {%Name} %cend]]></format>
</label_settings>

 

 

• 小数操作

AnyChart涉及到数字的地方都是默认保留两位小数，即使没有小数值也是以“x.00”的格式显示，这个是可以修改的。

针对这个问题可能需要用到两个内置变量：numDecimals和trailingZeros，numDecimals表示保留几位小数，trailingZeros:false表示如果有小数，但是小数位为0则不显示。合起来用就是这样的：{numDecimals:3,trailingZeros:false}，这个意思是最多保留3位小数，如果值是3.11则显示效果就是3.11，如果值为3.110则显示效果还是3.11，如果值为3.1111则显示效果是3.111。

<axes>
  <y_axis>
    <labels>
      <format>{%Value}{numDecimals:3,trailingZeros:false}</format>
    </labels>
  </y_axis>
</axes>