如何使用AnyChart和AnyMap创建组合图表

作者:控件中国网   出处:控件中国网   2016-06-21 11:22:37   阅读:37

组合图表是在实际应用中比较广泛的,可以在一个图表绘制区域同时绘制多个图表,这样更容易比较和分析数据,今天这篇文章主要介绍怎么在同一个图表区域内绘制图表和地图,利用AnyChart图表控件和AnyMap地图控件,开发人员只需要简单的代码就可以在Web页面上同时绘制图表和地图,AnyChartAnyMap目前都是采用全新的JavaScript引擎,完全的跨平台和浏览器,并且兼容HTML5。可以帮助开发人员创建现代化的数据可视化应用,具体使用方法如下:
Mapchart.png
<html>
  <head>
    <script src="http://cdn.AnyChart.com/js/7.10.1/AnyChart-bundle.min.js"></script>
    <script src="//cdn.AnyChart.com/geodata/1.2.0/countries/australia/australia.js"></script>
    <link rel="stylesheet" href="https://cdn.AnyChart.com/css/latest/AnyChart-ui.min.css" />
    <style>
      html, body, #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
 
AnyChart.onDocumentReady(function() {
    var dataSet = AnyChart.data.set([
        ['AU.WA', 300],
        ['AU.JB', 230],
        ['AU.NS', 240],
        ['AU.VI', 275],
        ['AU.NT', 130],
        ['AU.TS', 190],
        ['AU.CT', 100],
        ['AU.SA', 305],
        ['AU.QL', 190]
    ]);
 
    // mapping the data to the chart
    var chartDataSet = dataSet.mapAs({x: [0], value: [1]});
    var mapDataSet = dataSet.mapAs({id: [0], value: [1]});
 
    stage = AnyChart.graphics.create("container");
    var mapChart = AnyChart.map();
    mapChart.geoData(AnyChart.maps.australia);
    mapChart.container(stage);
    mapChart.title('Australia Map');
    // set the series
    var series = mapChart.choropleth(mapDataSet);
    series.geoIdField('code_hasc');
 
    // disable the labels
    series.labels(false);
    mapChart.bounds(0, 0, '100%', '70%');
    mapChart.draw();
 
    var areaChart = AnyChart.area();
    areaChart.container(stage);
    areaChart.title('Spline-Area Chart');
    areaChart.bounds(0, '70%', '100%', '30%');
    areaChart.splineArea(chartDataSet);
    areaChart.draw();
 
    var yAreaScale = areaChart.yScale();
    yAreaScale.minimum(0);
    yAreaScale.maximum(350);
 
});
    </script>
  </body>
</html>
Copyright© 2006-2015 ComponentCN.com all rights reserved.重庆磐岩科技有限公司(控件中国网) 版权所有 渝ICP备12000264号 法律顾问:元炳律师事务所
客服软件
live chat