国产免费激情网站,日韩欧美国产一级免费,欧美三级在线视频

在AnyChart中如何使用HTML將圖表嵌入到網(wǎng)頁(yè)中

原創(chuàng)|其它|編輯：郝浩|2012-11-01 14:20:18.000|閱讀 597 次

概述：本文講的AnyChart中使用HTML將圖表嵌入到網(wǎng)頁(yè)中去的實(shí)例，給大家剛分享一下

# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

純HTML嵌入

第一步，需要一個(gè)普通的HTML頁(yè)面，該頁(yè)面包含一個(gè)Flash對(duì)象，并把它放在你的網(wǎng)站上的某個(gè)文件夾里面：

創(chuàng)造AnyChartTest文件夾在IIS wwwroot文件夾里。

選擇圖表數(shù)據(jù)和它的視覺(jué)風(fēng)格

當(dāng)我們創(chuàng)建圖表的時(shí)候，肯定會(huì)需要一些數(shù)據(jù)，所以我們假設(shè)想要ACME公司的一年里零銷售渠道的銷售量，會(huì)用到下面的數(shù)據(jù)：

在AnyChart中如何使用HTML將圖表嵌入到網(wǎng)頁(yè)中

將此數(shù)據(jù)傳輸?shù)?AnyChart 組件，將它轉(zhuǎn)換為 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>

復(fù)制以上的代碼，在任何的純文本編輯器中打開 AnyChartTest 文件夾下的anychart.xml，并咱貼在上邊。由于XML 結(jié)構(gòu)可能看起來(lái)復(fù)雜，但大多數(shù)標(biāo)記是自我描述性的，我們可以用簡(jiǎn)單的話描述 XML 中所做的一切：

將會(huì)在在 <chart>節(jié)點(diǎn)描述圖表的指向，我們已經(jīng)設(shè)置水平繪圖類型-<chart plot_type="CategorizedHorizontal">

將會(huì)在<Chart_settings> 節(jié)點(diǎn)說(shuō)明圖表的外觀：

已經(jīng)設(shè)置好了圖表的標(biāo)題文本：

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

已經(jīng)設(shè)置好了x 軸標(biāo)題文本：

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

在<data>節(jié)點(diǎn)中已經(jīng)創(chuàng)建好了一個(gè)數(shù)據(jù)的<series>（當(dāng)生成multiseries 的圖表時(shí)，將會(huì)用到更多的series）。

在<series>節(jié)點(diǎn)中已經(jīng)添加了一個(gè) <point>節(jié)點(diǎn)在我們的表中的每個(gè)零售渠道，例如輸入其名稱和銷售價(jià)值等，<point name = "Department Stores" y="637166"/>，并且設(shè)置series的名字和類型，同時(shí)制定一種方式來(lái)顯示這一series。

HTML 文件結(jié)構(gòu)

現(xiàn)在就剩下最后一步就可以直接在網(wǎng)頁(yè)中看見剛才所作出來(lái)的圖表了，在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頁(yè)面的代碼。

最終效果：

在AnyChart中如何使用HTML將圖表嵌入到網(wǎng)頁(yè)中