狠狠操夜夜,三级精品在线,色中色主页

在AnyChart中如何使用HTML將圖表嵌入到網頁中

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

概述：本文講的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將圖表嵌入到網頁中