`
FengShen_Xia
  • 浏览: 273012 次
  • 性别: Icon_minigender_1
  • 来自: 东方水城
社区版块
存档分类
最新评论

【转】Flash图表AnyChart应用教程九:创建图表模板

阅读更多

创建 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>

 

那么这样的模板就是内部模板,点击查看条形图效果:

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">

 

 

 

本文转自:http://www.evget.com/zh-CN/info/catalog/18188.html 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics