数据可视化(6)--Google Charts实例

最新推荐文章于 2024-08-25 10:01:48 发布

sgj773624926

最新推荐文章于 2024-08-25 10:01:48 发布

阅读量1.8k

点赞数 2

本文链接：https://blog.csdn.net/craryprimitiveman/article/details/22166573

版权

本文介绍了Google Charts中的区域图，包括region模式和marker模式的使用示例，展示了如何通过代码实现地图的高亮和缩放气泡标记。区域图支持SVG或VML展示，可以自定义颜色和大小，适用于数据可视化中的地理信息呈现。

摘要由CSDN通过智能技术生成

上头给的关于jqplot的问题暂时解决了，继续google charts。

google charts的实例很多，就以区域图(Geochart)为例~~

区域图(Geochart)是一个国家、大陆或者区域的地图，它有两种模式。

region模式：在整个区域着色，如国家、省、州等。
marker模式：根据指定的值使用缩放气泡标记指定的区域。

区域图使用SVG或VML展示。请注意，该地图暂时不能滚动或拖动。

region模式的例子

<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
     google.load('visualization', '1', {
   'packages': ['geochart']});
     google.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600],
          ['RU', 700]
        ]);

        var options = {};

        var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    };
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

效果如下

想要修改代码测试戳这里：代码编辑

marker模式的例子

<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
     google.load('visualization', '1', {
   'packages': ['geochart'