在AnyChart中如何使用HTML将图表嵌入到网页中-控件新闻-慧都网

在AnyChart中如何使用HTML将图表嵌入到网页中

原创|其它|编辑：郝浩|2012-11-01 14:20:18.000|阅读 571 次

概述：本文讲的AnyChart中使用HTML将图表嵌入到网页中去的实例，给大家刚分享一下

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

纯HTML嵌入

第一步，需要一个普通的HTML页面，该页面包含一个Flash对象，并把它放在你的网站上的某个文件夹里面：

创造AnyChartTest文件夹在IIS wwwroot文件夹里。

选择图表数据和它的视觉风格

当我们创建图表的时候，肯定会需要一些数据，所以我们假设想要ACME公司的一年里零销售渠道的销售量，会用到下面的数据：

在AnyChart中如何使用HTML将图表嵌入到网页中

将此数据传输到 AnyChart 组件，将它转换为 XML，如下：

<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>
          <text>Sales of ACME Corp.</text>
        </title>
        <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>

复制以上的代码，在任何的纯文本编辑器中打开 AnyChartTest 文件夹下的anychart.xml，并咱贴在上边。由于XML 结构可能看起来复杂，但大多数标记是自我描述性的，我们可以用简单的话描述 XML 中所做的一切：

将会在在 <chart>节点描述图表的指向，我们已经设置水平绘图类型-<chart plot_type="CategorizedHorizontal">

将会在<Chart_settings> 节点说明图表的外观：

已经设置好了图表的标题文本：

<title>
 <text><![CDATA[Sales of ACME Corp.]]></text>
</title>

已经设置好了x 轴标题文本：

<x_axis>
  <labels align="Outside" />
 <title>
 <text><![CDATA[Retail Channel]]></text>
 </title>
</x_axis>

在<;data>节点中已经创建好了一个数据的<series>（当生成multiseries 的图表时，将会用到更多的series）。

在<series>节点中已经添加了一个 <point>节点在我们的表中的每个零售渠道，例如输入其名称和销售价值等，<point name = "Department Stores" y="637166"/>，并且设置series的名字和类型，同时制定一种方式来显示这一series。

HTML 文件结构

现在就剩下最后一步就可以直接在网页中看见刚才所作出来的图表了，在anychart的编辑器中打开粘贴代码就可以了。

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>AnyChart HTML Sample</title> 
</head> 
<body> 
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
width="600" height="300">
<param name="movie" value="swf/AnyChart.swf" />
<param name="flashvars" value="XMLFile=anychart.xml" />
<embed 
type="application/x-shockwave-flash" 
src="swf/AnyChart.swf"
flashvars="XMLFile=anychart.xml" 
width="600" height="300">
</embed>
</object>
</body> 
</html>

object里面的代码就是你需要嵌入HTML页面的代码。

最终效果：

在AnyChart中如何使用HTML将图表嵌入到网页中