创建 AnyChart 模板的思路是分离图表设置和数据部分,然后将模板稍作改变就可以应用于另一个图表。比如你在站点中会反复用到一个有相同标题和坐标轴的柱状图,你就可以将它存为XML文件,当你需要用到这个图表的时候,只需调用这个模板就可以了,而不用再从一个地方将图表的配置复制粘贴到另一个地方。本文就为你讲解如何创建 AnyChart 模板,如何存储模板以及如何应用模板。
首先确定你要创建一个什么样的图表,然后确定你想要哪些设置,最后就开始着手创建吧。
这里有一个条形图的示例:
<?xml version="1.0" encoding="UTF-8"?> <anychart> <charts> <chart plot_type="CategorizedHorizontal"> <data> <series name="Year 2003" type="Bar"> <point name="Department Stores" y="637166" /> <point name="Discount Stores" y="721630" /> <point name="Men's/Women's Specialty Stores" y="148662" /> <point name="Juvenile Specialty Stores" y="78662" /> <point name="All other outlets" y="90000" /> </series> </data> <chart_settings> <title enabled="false" /> <axes> <y_axis> <title> <text>Sales</text> </title> </y_axis> <x_axis> <labels align="Outside" /> <title> <text>Retail Channel</text> </title> </x_axis> </axes> </chart_settings> </chart> </charts> </anychart>
然后将它移动到模板内,示例代码如下:
<chart plot_type="CategorizedHorizontal"> <chart_settings> <!-- No title --> <title enabled="false" /> <axes> <!-- X Axis Settings --> <y_axis> <title> <text>Sales</text> </title> </y_axis> <!-- X Axis Settings --> <x_axis> <labels align="Outside" /> <title> <text>Retail Channel</text> </title> </x_axis> </axes> </chart_settings> </chart>
将模板命名为"Bar Chart With No Title #1",所以在上面代码的首行添加这行代码:
<template name="Bar Chart With No Title #1">
接下来就是如何存储模板的问题。
你可以将模板存储在图表XML内,在<anychart>节点的<templates>子节点内:
<?xml version="1.0" encoding="UTF-8"?> <anychart> <templates> <template name="No Title #1"> <chart plot_type="CategorizedHorizontal"> <chart_settings> <title enabled="false" /> </chart_settings> </chart> </template> </templates> <charts> <!-- Charts definition goes here --> </charts> </anychart>
那么这样的模板就是内部模板,点击查看条形图效果:
你也可以创建一个模板文件,然后将它和某个图表XML关联,模板文件根节点将是<templates>:
<templates> <template name="No Title #1"> <chart plot_type="CategorizedHorizontal"> <chart_settings> <title enabled="false" /> </chart_settings> </chart> </template> </templates>
把模板应用于图表,只需在<chart>节点的template属性中设置名称:
<?xml version="1.0" encoding="UTF-8"?> <anychart> <charts> <chart template="Bar Chart With No Title #1"> <data> <series name="Year 2003" type="Bar"> <point name="Department Stores" y="637166" /> <point name="Discount Stores" y="721630" /> <point name="Men's/Women's Specialty Stores" y="148662" /> <point name="Juvenile Specialty Stores" y="78662" /> <point name="All other outlets" y="90000" /> </series> </data> </chart> </charts> </anychart>
内部模板:如果模板指定在XML文件的<templates>节点内,只需知道一个名称就可以了:
<template name="No Title #1">
外部模板:如果模板指定在一个外部XML文件内,那就要在path属性下的<templates>节点内设置它的名称:
<templates path="templates.xml" /> <chart template="No Title #1">