时间戳

首页 > 解决方案 > 在 Google 地理图表中向下钻取

javascript - 在 Google 地理图表中向下钻取

问题描述

我已经在我的反应应用程序中实现了谷歌地理图表，现在单击特定区域或国家，我想在视图中向下钻取到该特定区域。

我能想到的一件事是在触发点击事件时更改“区域”参数的值。

我已经尝试了下面的代码，但它不适用于设置区域值的部分。

import React, { Component } from "react";
import { Chart } from "react-google-charts";

const data = [
  ["Region", "Health"],
  ["Canada", 400],
  ["United States", 700],
  ["United Kingdom", 400],
  ["Europe", 400],
  ["Vietnam", 500],
  ["Portugal", 300],
  ["Japan", 200],
  ["India", 100],
  ["Australia", 300]
];

class MapChart extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <div>
        <Chart
          chartEvents={[
            {
              eventName: "select",
              callback: ({ chartWrapper }) => {
                const chart = chartWrapper.getChart();
                const selection = chart.getSelection();
                if (selection.length === 0) return;
                const region = data[selection[0].row + 1];
                console.log(selection);
                alert("Selected : " + region);
                if (region[0] == "India") {
                  let drilldownValue = "IN";
                }
              }
            }
          ]}
          chartType="GeoChart"
          width="100%"
          position="relative"
          data={data}
          options={{
            // region: "150", // somehow set my drilldownValue parameter here
            colorAxis: { colors: ["#00b857", "#ffba00", "#d80000"] },
            datalessRegionColor: "#FFFFFF",
            defaultColor: "#FFFFFF",
            legend: "none",
            enableRegionInteractivity: true
          }}
        />
      </div>
    );
  }
}

标签： javascriptreactjschartsgoogle-visualizationdrilldown

解决方案

您需要在选择事件期间设置区域选项，
然后重新绘制图表。 

eventName: "select",
callback: ({ chartWrapper }) => {
  const chart = chartWrapper.getChart();
  const selection = chart.getSelection();
  if (selection.length === 0) return;
  const region = data[selection[0].row + 1];
  console.log(selection);
  alert("Selected : " + region);
  if (region[0] == "India") {
    let drilldownValue = "IN";

    // set region option, draw chart
    chartWrapper.setOption('region', drilldownValue):
    chartWrapper.draw();
  }
}

推荐阅读