GeoChart：标记加载速度非常慢

时间：2017-05-18 21:25:29

标签： google-visualization 

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表格加载它们的事实，即使硬编码的加载时间是相同的。

JSFIDDLE

1 个答案:

答案 0 :(得分：1)

在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>

注意：在此处找到country lat / lng列表 - ＆gt; 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>

编辑

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

tooltip: {
  isHtml: true
}

以及以下css ...... 

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

工具提示列必须具有 - ＆gt;的属性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>

相关问题
最新问题