程序员经验分享-hwhale

GeoChart：标记加载速度非常慢

2024-03-15 
google.charts.load('current', {'packages':['geochart']});
google.charts.setOnLoadCallback(drawRegionsMap);

  function drawRegionsMap() {
    var query = new google['visualization'].Query('https://docs.google.com/spreadsheets/d/____&headers=1&range=A1:B')
    query.send(handleQueryResponseTR);
    }

  function handleQueryResponseTR(response) {
            if (response.isError()) {
                alert('Error in query: ' + response.getMessage() + ' ' +            response.getDetailedMessage());
            return;
        }

    var options = {
      region: 'world',
      displayMode: 'markers',
    sizeAxis: { minValue: 0, maxValue: 5 },
      colorAxis: {
        colors: ['#fff', '#000']
      },
      legend: 'none'
    };

    var data = response.getDataTable();

    var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));

    chart.draw(data, options);
  };

电子表格的格式为：

 Country     Value
 XX          XX
 XX          XX

大约有 40 个条目（40 个不同的国家/地区）。 一切正常，但地图会一一加载标记，加载所有标记大约需要 30 秒。为什么这么慢？事实上，它并不是从 Google Sheets 加载它们，即使硬编码加载时间也是相同的。

JSFIDDLE http://jsfiddle.net/multiformeingegno/cj9jrdxw/1/


when in 标记模式格式 https://developers.google.com/chart/interactive/docs/gallery/geochart#markers-mode-format，使用纬度和经度似乎效果最好......

立即加载...

使用数据视图将国家/地区名称添加到工具提示中，

请参阅以下工作片段...

google.charts.load('current', {
  callback: drawRegionsMap,
  packages: ['geochart']
});

function drawRegionsMap() {
  var data = google.visualization.arrayToDataTable([
    ['Lat','Lng','Value','Country'],
    [41.153332,20.168331,58,'Albania'],
    [-25.274398,133.775136,28,'Australia'],
    [40.143105,47.576927,47,'Azerbaijan'],
    [23.684994,90.356331,52,'Bangladesh'],
    [-3.373056,29.918886,76,'Burundi'],
    [12.565679,104.990963,28,'Cambodia'],
    [56.130366,-106.346771,79,'Canada'],
    [-35.675147,-71.542969,48,'Chile'],
    [26.820553,30.802498,7,'Egypt'],
    [-16.578193,179.414413,127,'Fiji'],
    [46.227638,2.213749,25,'France'],
    [51.165691,10.451526,29,'Germany'],
    [22.396428,114.109497,9,'Hong Kong'],
    [20.593684,78.96288,119,'India'],
    [-0.789275,113.921327,35,'Indonesia'],
    [31.046051,34.851612,41,'Israel'],
    [41.87194,12.56738,4,'Italy'],
    [30.585164,36.238414,102,'Jordan'],
    [-0.023559,37.906193,121,'Kenya'],
    [29.31166,47.481766,59,'Kuwait'],
    [33.854721,35.862285,127,'Lebanon'],
    [55.169438,23.881275,3,'Lithuania'],
    [23.634501,-102.552784,10,'Mexico'],
    [9.081999,8.675277,48,'Nigeria'],
    [30.375321,69.345116,91,'Pakistan'],
    [31.952162,35.233154,66,'Palestinian Territories'],
    [12.879721,121.774017,80,'Philippines'],
    [51.919438,19.145136,242,'Poland'],
    [25.354826,51.183884,86,'Qatar'],
    [45.943161,24.96676,35,'Romania'],
    [61.52401,105.318756,133,'Russia'],
    [23.885942,45.079162,15,'Saudi Arabia'],
    [1.352083,103.819836,2,'Singapore'],
    [48.669026,19.699024,9,'Slovakia'],
    [35.907757,127.766922,41,'South Korea'],
    [40.463667,-3.74922,111,'Spain'],
    [7.873054,80.771797,97,'Sri Lanka'],
    [-6.369028,34.888822,34,'Tanzania'],
    [13.443182,-15.310139,129,'Gambia'],
    [38.963745,35.243322,2,'Turkey'],
    [23.424076,53.847818,85,'United Arab Emirates'],
    [55.378051,-3.435973,56,'United Kingdom'],
    [48.379433,31.16558,97,'Ukraine'],
    [37.09024,-95.712891,130,'United States'],
    [6.42375,-66.58973,120,'Venezuela'],
    [45.1,15.2,20,'Croatia']
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, 2, {
    calc: function (dt, row) {
      return dt.getValue(row, 3) + ': ' + dt.getFormattedValue(row, 2);
    },
    role: 'tooltip',
    type: 'string'
  }]);

  var options = {
    displayMode: 'markers',
  };

  var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
  chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="geochart-colors"></div>

注意：在此处找到国家/地区纬度/经度列表 -->国家.csv https://developers.google.com/public-data/docs/canonical/countries_csv

请参阅以下代码片段，仅将加载时间与国家/地区名称进行比较...

google.charts.load('current', {
  callback: drawRegionsMap,
  packages: ['geochart']
});

function drawRegionsMap() {
  var data = google.visualization.arrayToDataTable([
    ['Country', 'Value'],
    [{v: 'Albania'}, {v: 58}],
    [{v: 'Australia'}, {v: 28}],
    [{v: 'Azerbaijan'}, {v: 47}],
    [{v: 'Bangladesh'}, {v: 52}],
    [{v: 'Burundi'}, {v: 76}],
    [{v: 'Cambodia'}, {v: 28}],
    [{v: 'Canada'}, {v: 79}],
    [{v: 'Chile'}, {v: 48}],
    [{v: 'Egypt'}, {v: 7}],
    [{v: 'Fiji'}, {v: 127}],
    [{v: 'France'}, {v: 25}],
    [{v: 'Germany'}, {v: 29}],
    [{v: 'Hong Kong'}, {v: 9}],
    [{v: 'India'}, {v: 119}],
    [{v: 'Indonesia'}, {v: 35}],
    [{v: 'Israel'}, {v: 41}],
    [{v: 'Italy'}, {v: 4}],
    [{v: 'Jordan'}, {v: 102}],
    [{v: 'Kenya'}, {v: 121}],
    [{v: 'Kuwait'}, {v: 59}],
    [{v: 'Lebanon'}, {v: 127}],
    [{v: 'Lithuania'}, {v: 3}],
    [{v: 'Mexico'}, {v: 10}],
    [{v: 'Nigeria'}, {v: 48}],
    [{v: 'Pakistan'}, {v: 91}],
    [{v: 'Pakistan Balochistan'}, {v: 55}],
    [{v: 'Palestine, State of'}, {v: 66}],
    [{v: 'Philippines'}, {v: 80}],
    [{v: 'Poland'}, {v: 242}],
    [{v: 'Qatar'}, {v: 86}],
    [{v: 'Romania'}, {v: 35}],
    [{v: 'Russian Federation'}, {v: 133}],
    [{v: 'Saudi Arabia'}, {v: 15}],
    [{v: 'Singapore'}, {v: 2}],
    [{v: 'Slovakia'}, {v: 9}],
    [{v: 'Korea, Republic of'}, {v: 41}],
    [{v: 'Spain'}, {v: 111}],
    [{v: 'Sri Lanka'}, {v: 97}],
    [{v: 'Tanzania, United Republic of'}, {v: 34}],
    [{v: 'Gambia'}, {v: 129}],
    [{v: 'Turkey'}, {v: 2}],
    [{v: 'United Arab Emirates'}, {v: 85}],
    [{v: 'United Kingdom'}, {v: 56}],
    [{v: 'Ukraine'}, {v: 97}],
    [{v: 'United States'}, {v: 130}],
    [{v: 'Venezuela, Bolivarian Republic of'}, {v: 120}],
    [{v: 'Croatia'}, {v: 20}]
  ]);

  var options = {
    displayMode: 'markers',
  };

  var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="geochart-colors"></div>

EDIT

使用选项 --> 从工具提示中删除坐标tooltip.isHtml: true 

tooltip: {
  isHtml: true
}

以及以下 CSS...

.google-visualization-tooltip-item:first-child {
  display: none;
  visibility: hidden;
}

工具提示列必须具有 --> 的属性p: {html: true}

由于某种原因，列属性无法识别
使用数据视图绘制图表时

要更正，请在绘制之前将视图转换为数据表...
view.toDataTable()

请参阅以下工作片段...

google.charts.load('current', {
  callback: drawRegionsMap,
  packages: ['geochart']
});

function drawRegionsMap() {
  var data = google.visualization.arrayToDataTable([
    ['Lat','Lng','Value','Country'],
    [41.153332,20.168331,58,'Albania'],
    [-25.274398,133.775136,28,'Australia'],
    [40.143105,47.576927,47,'Azerbaijan'],
    [23.684994,90.356331,52,'Bangladesh'],
    [-3.373056,29.918886,76,'Burundi'],
    [12.565679,104.990963,28,'Cambodia'],
    [56.130366,-106.346771,79,'Canada'],
    [-35.675147,-71.542969,48,'Chile'],
    [26.820553,30.802498,7,'Egypt'],
    [-16.578193,179.414413,127,'Fiji'],
    [46.227638,2.213749,25,'France'],
    [51.165691,10.451526,29,'Germany'],
    [22.396428,114.109497,9,'Hong Kong'],
    [20.593684,78.96288,119,'India'],
    [-0.789275,113.921327,35,'Indonesia'],
    [31.046051,34.851612,41,'Israel'],
    [41.87194,12.56738,4,'Italy'],
    [30.585164,36.238414,102,'Jordan'],
    [-0.023559,37.906193,121,'Kenya'],
    [29.31166,47.481766,59,'Kuwait'],
    [33.854721,35.862285,127,'Lebanon'],
    [55.169438,23.881275,3,'Lithuania'],
    [23.634501,-102.552784,10,'Mexico'],
    [9.081999,8.675277,48,'Nigeria'],
    [30.375321,69.345116,91,'Pakistan'],
    [31.952162,35.233154,66,'Palestinian Territories'],
    [12.879721,121.774017,80,'Philippines'],
    [51.919438,19.145136,242,'Poland'],
    [25.354826,51.183884,86,'Qatar'],
    [45.943161,24.96676,35,'Romania'],
    [61.52401,105.318756,133,'Russia'],
    [23.885942,45.079162,15,'Saudi Arabia'],
    [1.352083,103.819836,2,'Singapore'],
    [48.669026,19.699024,9,'Slovakia'],
    [35.907757,127.766922,41,'South Korea'],
    [40.463667,-3.74922,111,'Spain'],
    [7.873054,80.771797,97,'Sri Lanka'],
    [-6.369028,34.888822,34,'Tanzania'],
    [13.443182,-15.310139,129,'Gambia'],
    [38.963745,35.243322,2,'Turkey'],
    [23.424076,53.847818,85,'United Arab Emirates'],
    [55.378051,-3.435973,56,'United Kingdom'],
    [48.379433,31.16558,97,'Ukraine'],
    [37.09024,-95.712891,130,'United States'],
    [6.42375,-66.58973,120,'Venezuela'],
    [45.1,15.2,20,'Croatia']
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, 2, {
    calc: function (dt, row) {
      return '<div><span>' + dt.getValue(row, 3) + '</span>: ' + dt.getFormattedValue(row, 2) + '</div>';
    },
    role: 'tooltip',
    type: 'string',
    p: {html: true}
  }]);

  var options = {
    displayMode: 'markers',
    tooltip: {
      isHtml: true
    }
  };

  var chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
  chart.draw(view.toDataTable(), options);
}
.google-visualization-tooltip-item:first-child {
  display: none;
  visibility: hidden;
}

.google-visualization-tooltip-item span {
  font-weight: bold;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="geochart-colors"></div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

googlevisualization

GeoChart：标记加载速度非常慢 的相关文章

随机推荐

  • 如何在模式打开时禁用正文滚动（仅限 IOS）

    仅限 IOS iPhone X iPhone 7 等 甚至 jquery 模态库也不起作用 https jquerymodal com https jquerymodal com 在 iPhone 上打开模态框 您将能够滚动正文 我发现很难

  • Beaker 中数据库和 sql 后端的区别？

    看起来像Beaker http beaker groovie org 支持两种数据库后端 ext database 和 ext sqla 但是它们之间有什么区别呢 Overview 查看源代码 Beaker 1 6 4 py2 7 egg

  • 显示编码的电子邮件主题

    我正在使用发送邮件消息向我们的支持系统发送电子邮件 但是当它发送电子邮件时 它会显示主题行 如下屏幕所示 us ascii Q R899076 Aman 系统摘要 在主题中我使用变量 vUserName Get Item env usern

  • 使用 SparkSQL 删除 MySQL 表

    我知道我们可以通过以下命令从 SparkSQL 查询或创建 Mysql 表 val data sqlContext read jdbc urlstring tablename properties data write format com

  • 更改 UISwitch 应用程序的颜色

    我在用UISwitch在 iOS 3 中在我的应用程序中创建一个开关元素 它的默认颜色设置为蓝色 但我想将其颜色更改为棕色 我怎样才能为它选择不同的颜色UISwitchiOS 3 中的元素 我怎样才能为它选择不同的颜色UISwitch现代

  • 忽略 Oracle DUP_VAL_ON_INDEX 异常有多糟糕？

    我有一个表 用于记录用户是否至少查看过一个对象一次 因此 HasViewed ObjectID number FK to Object table UserId number FK to Users table 两个字段都不为 NULL 并

  • WCF客户端：第一次调用失败，第二次调用成功

    我有一个 REST Web 服务 它使用 WCF 客户端调用外部 SOAP Web 服务 此 REST Web 服务托管在我们测试环境中的 IIS 中 当调用 REST Web 服务 然后调用外部 Web 服务 使用 WCF 客户端 时 在

  • 当按钮位于 UITableViewCell 上时，为什么 UIButton shownTouchWhenHighlighted 不起作用？

    I put a UIButton on a UITableViewCell并设置其showsTouchWhenHighlighted财产给YES 单元格的选择风格是UITableViewCellSelectionStyleNone 我有一个

  • 使用重复列重塑数据

    我正在尝试使用重塑来重组我的数据集 这是我的数据的一个子集 它是一个 16 X 198 数据框 每个奇数列都是 16 年的列表 偶数列具有不同国家 地区的值 Algeria x Algeria y Argentina x Argentina

  • ggplot 中的等值线图，其中包含有孔的多边形

    我正在尝试绘制德国的分区统计图 显示各州的贫困率 灵感来自这个问题 https stackoverflow com questions 21651985 shapefile to produce a linked micromap in r

  • Spring：我希望为 Web 应用程序创建一个 junit 测试 - 需要 WebApplicationContext

    我正在编写一个 junit 测试 以便 令人惊讶地 独立测试我的应用程序的一部分 问题是我在单元测试中调用的构造函数中执行以下行 WebApplicationContext webApplicationContext ContextLoad

  • 如何在 SELECT 语句的 WHERE 子句中传递 php 变量？

    我有一个 php 变量 我想在我的数据库中使用此变量获取数据库中的另一个字段where clause My code require conn php module POST postmodule query SELECT width FR

  • 使用 scipy 计算两个正态分布的重叠概率

    我有两条 scipy stats norm mean std pdf 0 正态分布曲线 我试图找出两条曲线的差异 重叠 我如何在Python中使用scipy计算它 谢谢 开始Python 3 8 标准库提供了NormalDist https

  • 如何在鼠标悬停在栏上时显示标签

    我用 Chartist js 制作了一个条形图 现在我想在栏上添加一些监听事件 如何让鼠标悬停在栏上时显示标签 您有 2 个选择 Option 1 您可以使用一个工具提示插件 你可以在这里找到它 https github com Globe

  • Jquery 验证：根据下拉选择动态添加/删除规则

    我有一个下拉选择器 其值从 1 到 4 根据选择 表单中的后续输入将被隐藏 并且每个输入所需的验证都会被删除 例如 如果选择 2 则显示输入 1 2 并添加所需的验证 同时隐藏 3 4 并删除验证 dropdownSelector chan

  • 将多个 jar 合并为一个（使用 Maven）

    我在 javafx 中有一个项目 我有 3 个依赖项 我尝试使用 maven 将它们与我的主体 jar 结合起来 结果我得到了一个罐子 1 82mb 但是当我点击他时 他没有启动提示出现 pom xml

  • 连接Redis集群失败

    我已经设置了 Redis 集群谷歌计算引擎 http console developers google com by 点击部署 https cloud google com solutions redis click to deploy

  • 获取 WhatsApp 消息

    是否可以创建一个监听器来获取消息whatsApp在安卓中 我的意思是就像你有一个broadcastReceiver在android中收听传入的短信 这件事是否需要任何 API 或者这是合法的事情 还是我需要获得任何许可whatsApp Wh

  • 如何在没有源代码的情况下在类中放置断点？

    我有一个 Web 应用程序 我需要找到访问 http 请求对象的所有类 因为其中一个类导致了难以发现的错误 因此我想在ServletRequest实现的一些方法中放置断点 然而 这个实现是由 Weblogic 提供的 我没有其来源 如何在没

  • GeoChart：标记加载速度非常慢

    google charts load current packages geochart google charts setOnLoadCallback drawRegionsMap function drawRegionsMap var

热门标签