Amcharts：好用的Javascript图表库

最近项目里需要展示世界地图，团队内的图表库又不能满足要求，google了一下，看到了别人写的一个demo, 顺藤摸瓜，找到了使用的图表库Amcharts。

下面就举例讲述下，我用到的地图demo:
效果图：

image.png

// index.html
<!doctype html>
<html>
  <head>
    <base href="/" />
    <meta charset="utf-8" />
    <title>World Map</title>
    <script type="text/javascript" src="http://wow.techbrood.com/libs/jquery/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="http://www.amcharts.com/lib/3/ammap.js?3.17.0"></script>
    <script type="text/javascript" src="http://www.amcharts.com/lib/3/maps/js/worldLow.js"></script> 
  </head>
  <body>
    <div id="mapdiv"></div>
    <script type="text/javascript" >
      // svg path for target icon
      var targetSVG = "M9,0C4.029,0,0,4.029,0,9s4.029,9,9,9s9-4.029,9-9S13.971,0,9,0z M9,15.93 c-3.83,0-6.93-3.1-6.93-6.93S5.17,2.07,9,2.07s6.93,3.1,6.93,6.93S12.83,15.93,9,15.93 M12.5,9c0,1.933-1.567,3.5-3.5,3.5S5.5,10.933,5.5,9S7.067,5.5,9,5.5 S12.5,7.067,12.5,9z";
      // svg path for plane icon
      var planeSVG = "m2,106h28l24,30h72l-44,-133h35l80,132h98c21,0 21,34 0,34l-98,0 -80,134h-35l43,-133h-71l-24,30h-28l15,-47";
    window.AmCharts && window.AmCharts.makeChart(mapdiv, {
      type: "map",
      fontSize: 20,
      hideCredits: true,
      dataProvider: {
        map: "worldLow",
        zoomLevel: 1,
        zoomLongitude: 8,
        zoomLatitude: 42,
        lines: [{
          id: "line1",
          arc: -0.85,
          alpha: 0.3,
          latitudes: [48.8567, 23.117],
          longitudes: [2.3510, 112.576]
        }, {
          id: "line2",
          alpha: 0,
          color: "#000000",
          latitudes: [48.8567, 23.117],
          longitudes: [2.3510, 112.576]
        }],
        images: [{
          svgPath: targetSVG,
          label: "Paris",
          latitude: 48.8567,
          longitude: 2.3510
        }, {
          svgPath: targetSVG,
          label: "广州",
          latitude: 23.117,
          longitude: 113.276,
        }, {
          svgPath: planeSVG,
          positionOnLine: 0.5,
          color: "#1860ff",
          animateAlongLine: false,
          lineId: "line1",
          //是否往返
          flipDirection: false,
          loop: true,
          scale: 0.05,
          positionScale: 1.8
        }]
      },

      areasSettings: {
        unlistedAreasColor: "#8dd9ef",
      },

      imagesSettings: {
        color: "#585869",
        rollOverColor: "#585869",
        selectedColor: "#585869",
        labelRollOverColor: '#585869',        
        pauseDuration: 0.2,
        animationDuration: 4.5,
        adjustAnimationSpeed: true
      },

      linesSettings: {
        color: "#585869",
        alpha: 0.4,
        arrowAlpha: 0.5
      }
    });
    </script> 
  </body>
</html>

index.html 里需要先引入三个js 文件。

jquery 不用说了，很多人都会用
worldLow.js 文件里就是一个世界地图的GeoJSON标准的数据结构。GeoJSON是一种对各种地理数据结构进行编码的格式，基于Javascript对象表示法的地理空间信息数据交换格式。查看Amcharts百度百科
ammap.js 我看了ammap.js的源码，感觉写的很不错

Amcharts：好用的Javascript图表库

推荐阅读更多精彩内容