Детализация в диаграмме Google Geo

Я реализовал Google Geo Chart в своем приложении для реагирования. Теперь, щелкнув определенный регион или страну, я хочу перейти к этому конкретному региону в представлении.

Одна вещь, о которой я могу думать, - это изменить значение параметра «регион» всякий раз, когда запускается событие щелчка.

Я пробовал приведенный ниже код, но он не работает для установки значения региона.

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


reactjs javascript charts google-visualization drilldown
person Dipankar    schedule 27.09.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

вам нужно будет установить параметр региона во время события выбора,
затем перерисовать диаграмму.

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();
  }
}
person WhiteHat    schedule 27.09.2019