标签: react-google-charts

我正在使用react-google-chart，我想做的是制作一个双 y 轴 ColumnChart 我已经用普通的 Javascript 完成了

google.charts.load('current', {
  'packages': ['corechart', 'bar']
});
google.charts.setOnLoadCallback(drawStuff);

function drawStuff() {

  var chartDiv = document.getElementById('chart_div');

  var data = google.visualization.arrayToDataTable([
    ['Month', 'CTC', 'Gross Salary', 'Variation of CTC', 'Total No of Employes'],
    ['Jan', 35000, 27000, 10000, 3000],
    ['feb', 30000, 24000, 8000, 4000],
    ['Mar', 50000, 37000, 7000, 2000],
    ['May', 20000, 17000, 5000, 4123],
    ['June', 20000, 17000, 5000, 4000],
    ['July', 20000, 17000, 5000, 4000],
    ['August', 20000, 17000, 5000, 4000],
    ['Sep', 20000, 17000, 5000, 4000],
    ['Oct', 20000, …

我正在研究 react google-chart react-google-chart并且工作正常。我想要做的是将点击事件添加到水平轴的标签并获取标签名称并做我想做的事情

我谷歌了很多，但还没有找到正确的解决方案

我所做的是这个

import React, { Component } from 'react'
import { Chart } from "react-google-charts";
export default class manpowerGraph extends Component {
    render() {
     const data=[
        ['Year', 'Sales'],
        ['jan', 20],
        ['feb', 100],
        ['march', 55],
        ['april', 120],
        ['may', 200],
        ['june', 220],


      ]
     const options={
        // Material design options
        chart: {
          title: 'Manpower',
        },
      }
        return (
            <div className="manpowerChart">
<Chart
  chartType="Bar"
  width="100%"
  height="400px"
  data={data}
  options={options}
  legendToggle
  chartEvents={[
    {
      eventName: "ready",
      callback: ({ chartWrapper, google }) => { …

我需要在每行的表格单元格内创建条形图或柱形图。

即我需要为表格单元格内的每个类别填充一个图表。

JSON：

[
  {
    "Chocolate": [
      {
        "kisses": [
          {
            "2022": {
              "jan": 2000,
              "feb": 1200,
              "mar": 7000
            }
          },
          {
            "2021": {
              "jan": 2000,
              "feb": 1200,
              "mar": 7000
            }
          }
        ]
      },
      {
        "kitkat": [
          {
            "2022": {
              "jan": 1000,
              "feb": 3200,
              "mar": 4500
            }
          },
          {
            "2021": {
              "jan": 2000,
              "feb": 200,
              "mar": 7030
            }
          }
        ]
      }
    ]
  },
  {
    "Drinks": [
      {
        "Coco cola": [
          {
            "2022": {
              "jan": 2000,
              "feb": 1200,
              "mar": 7000
            } …

我有来自 React geocharts 的基本地理图表

<Chart
    width={calculateMapHeight()}
    height={'575px'}
    chartType="GeoChart"
    data={user.details}
    getSelection={(e) => console.log('test')}
    select={console.log('test')}
    enableRegionInteractivity={true}
    regionClick={(e) => console.log('test')}
    onClick={(e) => console.log('test')}
    mapsApiKey="apikey"
    rootProps={{ 'data-testid': '1' }}
    options={{
        backgroundColor: 'transparent',
        defaultColor: red,
        animation: {
            startup: true,
            duration: 2500,
        },
    }}
/>

但我不知道当用户点击一个国家/地区时我需要做什么来调用事件？我尝试通过上述所有方法记录内容，但没有任何效果

另外，作为旁注，当该国家/地区已传递到我的地图中时，它似乎只显示悬停的国家/地区。是否可以为所有国家/地区打开它？