Google Charts (GeoChart) - 放大

Posted 2023-05-07

【中文标题】Google Charts (GeoChart) - 放大

【英文标题】：Google Charts (GeoChart) - Zoom in closer

【发布时间】：2012-04-25 21:36:31

【问题描述】：

使用 Google Charts GeoChart：https://google-developers.appspot.com/chart/interactive/docs/gallery/geochart

是否可以放大而不只是放大整个区域？也就是说，要达到地图的街景级别，并且仍然按照上面链接中的标记示例中所示放置标记？

感谢大家的帮助...

【参考方案1】：

API 不支持缩放、拖动或滚动。

【讨论】：

谢谢。最后在地图上放置了标记来完成我的目标，可惜你不能放大地图，这是一个很棒的工具。

它可以通过使用enableRegionInteractivity 以编程方式完成。必须更改region 选项并重绘。高飞，他们没有把它烤进去。

【参考方案2】：

作为一个技巧，我在容器上使用了带有溢出的 css 缩放属性：隐藏。但它应该在chart.draw() 之后，在谷歌图表就绪事件上执行。

如果您需要重绘（我正在重绘窗口大小以保证响应性），您应该在再次绘制之前再次强制缩放到 1 或 100%。

html：

<div id="container" style="overflow:hidden; width:..px;">
     <div id="chart_div"></div>
</div>

JS（jQuery）：

$("#chart_div").css("zoom",1);

// [... google chart code generation ...]

google.visualization.events.addListener(chart, 'ready', function()  $("#chart_div").css("zoom",1.4); );
chart_draw(data, options);

它对我有用，值得一试。

【讨论】：

这不是一个好习惯，因为你会失去工具提示的位置

【参考方案3】：

我也遇到了同样的问题，但事实证明 GeoChart 在这方面太有限了。

一种选择是使用谷歌地图和数据层。例如，如果您需要带有颜色和大小的标记，您可以执行类似下页示例的操作（请参阅“高级样式”）： https://developers.google.com/maps/documentation/javascript/examples/layer-data-quakes

您需要实现自己的插值来确定大小和颜色，但生成的地图/图表会比单独使用 GeoChart 更好。

【参考方案4】：

Google Charts 现在似乎有一个名为“explorer”的过期选项，适用于某些图表类型。看： https://developers.google.com/chart/interactive/docs/gallery/linechart#Configuration_Options

【讨论】：

但不使用 Geocharts

我创建了 jquery 插件，其中包括一个缩放图表的选项。见 - chartinator.com

【参考方案5】：

您可以尝试在标记单击时生成一个选择事件，在事件函数中，您可以通过更改 chartOptions 来更改图表的区域，如下所示：

 google.visualization.events.addListener(chart, 'select', () => 
  // console.log(this.continents);
  if (continents.includes( continentData.getValue(chart.getSelection()[0].row, 2))) 
   chartOptions.region = '053';
   // 002 - Africa
   // 150 - Europe
   // 019 - Americas 021 - Northern America 005- South America 013- Central America 029 - Caribbean
   // 142 - Asia
   // 009 - Oceania
   // 053 - Australia and New Zealand

    chart.draw(continentData, chartOptions);
  
);