Flash图表AnyChart应用教程三:在网页中嵌入flash地图

原创|其它|编辑:郝浩|2012-11-12 13:27:19.000|阅读 1175 次

概述:AnyChart 是一款灵活的基于Flash/JavaScript (HTML5) 的图表控件,可在网页上创建丰富的图表和地图类型,本教程将一步步为你讲解如何运用AnyChart创建flash地图。

相关链接:

AnyChart 是一款灵活的基于Flash/JavaScript (HTML5) 的图表控件,可在网页上创建丰富的图表和地图类型,本教程将一步步为你讲解如何运用AnyChart创建flash地图。

创建一个网页

首先需要一个普通的包含Flash对象的HTML页面,把它放在网站的某些文件夹里。在IIS wwwroot 文件夹中创建AnyChartTest 文件夹,结构如下:

/AnyChartTest
         /swf
                  AnyChart.swf
                  states.amap
         /js
                  AnyChart.js
        anychart.xml
        anychart.html

选择地图数据和地图风格

地图数据需包含一个XML文件,它决定地图将如何显示,显示什么地图等。假设我们要显示一张彩色的USA地图。这个地图存储在states.amap文件中(amap文件是AnyChart存储地图数据的专有格式)。

要显示地图,首先创建XML设置文件,示例代码如下:

<?xml version="1.0" encoding="UTF-8"?>
<anychart>
  <charts>
    <chart plot_type="Map">
      <chart_settings>
        <title>
          <text>USA Map</text>
        </title>
      </chart_settings>
      <data_plot_settings>
        <map_series source="states.amap">
          <projection type="mercator" />
          <undefined_map_region palette="default">
            <label_settings enabled="True" />
          </undefined_map_region>
        </map_series>
      </data_plot_settings>
    </chart>
  </charts>
</anychart>

打开AnyChartTest文件夹中的anychart.xml,并将上面这段代码粘贴进去。

设置地图标题文本:

<title>
  <text>USA Map</text>
</title>

将 "states.amap"文件设置为地图源:

<map_series source="states.amap" />

将地图对象设置为Mercator,设置各大州的颜色,启用所有区域的标签:

<map_series source="states.amap">
  <projection type="mercator" />
  <undefined_map_region palette="default">
    <label_settings enabled="True" />
  </undefined_map_region>
</map_series>

HTML文件结构

将以下代码复制粘贴到anychart.html:

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>AnyChart Sample Flash Map </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 = 450; 
    chart.setXMLFile('./anychart.xml'); 
    chart.write(); 
    //]]> 
    </script> 
</body> 
</html> 

在Web浏览器中启动html页面,有两种方式:

http://localhost/AnyChartTest/anychart.html

C:\Inetpub\wwwroot\AnyChartTest\anychart.html

效果如下:

flash地图,USA Map



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:慧都控件

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
AnyChart

灵活的高度可定制的跨浏览器、跨平台JavaScript (HTML5) 图表控件。

在线
客服
在线
QQ
电话
咨询
400-700-1020
购物车 反馈 返回
顶部
在线客服系统
live chat