亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

Anychart圖表系列一:入門介紹

系統(tǒng) 2038 0

在項(xiàng)目中使用Anychart圖表已經(jīng)有8個月有余,對Anychart整體也有了一定的了解,產(chǎn)品升級的空閑期,分享一點(diǎn)Anychart圖表的使用經(jīng)驗(yàn)。

?

  • 前言

Anychart是一款基于Flash/HTML5(最新的6.0x版本開始支持HTML5)進(jìn)行圖形渲染的圖表組件,圖數(shù)據(jù)采用了XML格式進(jìn)行解析,主要提供Javascript方法調(diào)用的形式來將圖形渲染到web頁面。

這是一款商業(yè)收費(fèi)產(chǎn)品,使用未授權(quán)的產(chǎn)品時,圖表背景會有“Anychart”字樣的水印。

官網(wǎng)地址: http://www.anychart.com/home/

幫助文檔地址: http://anychart.com/products/anychart/docs/users-guide/index.html?QuickStart.html

XML格式標(biāo)簽文檔說明: http://anychart.com/products/anychart/docs/xmlReference/index.html

擼主大多數(shù)Anychart技術(shù)都是從幫助文檔中學(xué)習(xí)的,雖然英語只有四級,但是看起來感覺壓力也不大,某些單詞不懂就谷歌翻譯。

?

  • HelloWorld

如何創(chuàng)建自己的第一個圖表在官網(wǎng)文檔中已經(jīng)有詳細(xì)說明,鏈接在 這里 ,下面我再結(jié)合例子簡單說明一下。

?

首先下載圖表的相關(guān)文件,主要包括一個或兩個js、多個swf文件。

Anychart的js文件有兩個:AnyChart.js和AnyChartHTML5.js,前者是圖表必備js文件,后者是如果你需要支持HTML5時才需要的文件,所以有的時候可用可不用。

Anychart的swf文件也有多個,用得最多的是AnyChart.swf和Preloader.swf,前者包含了所有的圖數(shù)據(jù);后者是一個優(yōu)化性能的文件,在IE高版本瀏覽器下效果明顯,如果圖很多并在一頁顯示不完,它可以達(dá)到延遲加載的效果,即優(yōu)先顯示第一頁的圖。同時呢,如果你下載的是官方給的鏈接,你會發(fā)現(xiàn)除了以上兩個swf還會有Chart.swf、Pie.swf、Funnel.swf等等文件,這些文件都比Anychart.swf小,其實(shí)他們的作用是如果你只想用某一類的圖并且為了加載更快,可以單一選擇某一種swf來渲染。

?

然后準(zhǔn)備一個html文件和xml文件。因?yàn)锳nychart可以在web頁面中顯示,所以我們需要準(zhǔn)備一個html文件,并且在里面編寫圖形生成代碼,最后訪問這個html即可看到效果。而XML前面已經(jīng)說了,Anychart是通過解析XML數(shù)據(jù)來生成圖形的,也就是說你希望圖形是以餅狀還是柱狀還是別的圖形顯示,已經(jīng)你希望顯示的數(shù)據(jù)是什么,是否顯示標(biāo)題,是否顯示動畫效果等等配置都是通過XML來說明的。

?

下面看一個簡單的XML例子,通過plot_type來定義圖是水平還是豎直顯示;通過<series>的type來說明是什么類型的圖;<point>是一條數(shù)據(jù),下面有5條就表示圖表會出5條柱子;<point>的name有很多種術(shù)語解釋,我通常稱之為“指標(biāo)”,而屬性y則是指標(biāo)對應(yīng)的數(shù)據(jù)值,我通常稱之為“指標(biāo)值”。

?

      <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>
      </chart_settings>
    </chart>
  </charts>
</anychart>
    

上面這段XML,個人認(rèn)為是是最最簡單的XML了,在項(xiàng)目中你可能會遇到比這復(fù)雜百倍的XML,但是不要?dú)怵H,后續(xù)我會教大家如何讓圖表“組件化”。?

?

?

下面是一段HTML代碼,這段代碼告訴你如何調(diào)用Anychart并且生成圖形,首先需要new Anychart(swf url)的形式生成Anychart對象,然后設(shè)置圖形的高度和寬度,通過setXMLFile(xml url)指定XML數(shù)據(jù)文件,在通過writ方法即可顯示圖形了。

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Sample AnyChart Flash Chart</title>
    <script type="text/javascript" language="javascript" src="./js/AnyChart.js"></script>
  </head>
  <body>
    <script type="text/javascript" language="javascript">
      //<![CDATA[
		var chart = new AnyChart('./swf/AnyChart.swf');
		chart.width = 600;
		chart.height = 300;
		chart.setXMLFile('./anychart.xml');
		chart.write();
	  //]]>
    </script>
  </body>
</html>
    

?

下面看最后的圖形效果


Anychart圖表系列一:入門介紹
?

至此,一個最簡單的Anychart圖表生成了,如果想看到圖的效果,可以在官網(wǎng)下載該例子( 點(diǎn)這里

?

針對上面的HTML呢,做一些擴(kuò)展,有些用戶不希望通過chart.write方法出圖,有些用戶不希望傳入XML文件地址,而是直接傳一段XML字符串來生成圖,其實(shí)這個功能Anychart都提供了,并且也是我一直很推薦的寫法。

下面這段代碼介紹了如何解決上面的需求:通過new Anychart(swf url,preloader swf) 傳入preloader.swf地址來提高大數(shù)據(jù)量圖表加載速度,通過setXMLData方法可以傳入XML字符串,通過write(html id)來將圖表渲染到指定HTML標(biāo)簽內(nèi)。Anychart圖表高寬度支持傳入px像素值,也支持百分百比的形式,需要注意的是圖表的高寬度依賴于自己父容器(html標(biāo)簽)的高寬度,即如果你的父容器本身很小,那么圖表像素設(shè)置再高也不會有效果的。

?

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>sample-single-series-column-chart</title>
	<style type="text/css">
		html, body, #chartContainer {
			width: 100%;
			height: 100%;
			padding: 0;
			margin: 0;
		}
	</style>
	<script type="text/javascript" language="JavaScript" src="js/AnyChart.js"></script>
	<script type="text/javascript" language="JavaScript">
	    var chart = new AnyChart('swf/AnyChart.swf', 'swf/Preloader.swf');
	    chart.width = "100%";
        chart.height = "100%";
        chart.setXMLData("<anychart>......</anychart>");
	    chart.write("chartContainer");
	</script>
</head>
<body>
<div id="chartContainer"></div>
</body>
</html>

    

?

  • 總結(jié)

生成圖表分為以下幾個簡單的步驟:

①環(huán)境搭建:準(zhǔn)備Anychart必備文件(Javascript和swf)

②準(zhǔn)備XML數(shù)據(jù)

③web頁面編寫代碼,調(diào)用Anychart對象生成圖形

?

第一篇說得很簡單,后續(xù)我將從多方面一步步介紹如何靈活使用Anychart。

Anychart圖表系列一:入門介紹


更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主

微信掃碼或搜索:z360901061

微信掃一掃加我為好友

QQ號聯(lián)系: 360901061

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點(diǎn)擊下面給點(diǎn)支持吧,站長非常感激您!手機(jī)微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點(diǎn)擊微信右上角掃一掃功能,選擇支付二維碼完成支付。

【本文對您有幫助就好】

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧,站長會非常 感謝您的哦!!!

發(fā)表我的評論
最新評論 總共0條評論
主站蜘蛛池模板: 欧美猛交xxxxx | 国产精品国产三级国产专区5o | 亚洲欧洲一二三区机械有限公司 | 日本一区二区三区在线观看 | 日本一级α一片免费视频 | 一本色道久久爱88av俺来也 | 亚洲欧美日本另类 | 香蕉精品视频在线观看入口 | 99久久精品免费看国产四区 | 在线影院福利 | 免费看搡女人的视频 | 在线欧美69v免费观看视频 | 中文乱码精品一区二区三区 | 日韩欧美视频一区 | 伊人影院在线观看视频 | 激情在线网站 | 亚洲青色在线 | 亚洲欧美日本一区 | 欧美一级特黄aaa大片 | 亚洲 欧美 自拍 卡通 综合 | 久久精品国产精品亚洲精品 | 国产精品免费aⅴ片在线观看 | 香蕉久久久 | 欧美成人黄色网 | 久久亚洲精品中文字幕三区 | 成人国产在线24小时播放视频 | 欧美成人精品高清在线播放 | 久久综合综合久久狠狠狠97色 | 深夜免费在线观看 | 亚洲二三区 | 欧美高清亚洲欧美一区h | 国产剧情自拍 | 久久国产一片免费观看 | 国产高清视频在线 | 欧美成人精品高清在线观看 | 久久国产免费一区二区三区 | 视频国产免费 | 欧美理论大片清免费观看 | 99国产福利视频在线观看 | 欧美xxx4k精品hd | 日韩在线视频一区二区三区 |