google-visualization - Google Charts（GeoChart）-ズームイン

Question

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

領域全体よりもズームインすることは可能ですか？つまり、マップのストリートビューレベルに到達し、上記のリンクのマーカーの例に示されているようにマーカーを配置するにはどうすればよいですか？

助けてくれてありがとう...

Answer 1

APIは、ズーム、ドラッグ、またはスクロールをサポートしていません。

Answer 2

トリックとして、コンテナーにoverflow：hiddenを指定してcsszoomプロパティを使用しました。ただし、Google Chart Readyイベントの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);

それは私のために働きました、そしてそれは試す価値があります。

Answer 3

私も同じ問題を抱えていましたが、GeoChartはその点で制限が多すぎることがわかりました。

1つのオプションは、Googleマップとデータレイヤーを使用することです。たとえば、色とサイズのマーカーが必要な場合は、次のページの例のようにすることができます（「高度なスタイル」を参照）： https ：//developers.google.com/maps/documentation/javascript/examples/layer -データ地震

サイズと色を決定するには、独自の補間を実装する必要がありますが、結果のマップ/チャートは、GeoChartのみよりも優れています。

Answer 4

Google Chartsには、一部のグラフタイプで機能する「エクスプローラー」と呼ばれる期限切れのオプションがあるようです。参照： https ：//developers.google.com/chart/interactive/docs/gallery/linechart#Configuration_Options

Answer 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);
  }
});