在页面加载时，所有工具提示始终在 react-google-charts 上可见？

Question

有没有一种方法可以显示所有工具提示，而无需悬停或选择 react-google-chart 上的某个部分？

设法使其与 Google 图表 (pureJS) 一起使用，但无法找到在 react-google-charts 中使用相同功能的方法。

google.load('visualization', '1.0', {
  'packages': ['corechart']
});
google.setOnLoadCallback(drawStuff);

function drawStuff() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Topping');
  data.addColumn('number', 'Slices');
  data.addRows([
    ['Mushrooms', 3],
    ['Onions', 1],
    ['Olives', 1],
    ['Zucchini', 1],
    ['Pepperoni', 2]
  ]);

  // Set chart options
  var options = {
    'title': 'How Much Pizza I Ate Last Night',
    'width': 400,
    'height': 300,
    tooltip: {
      trigger: 'selection',
      /* isHtml: true */
    }
  };

  // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
  google.visualization.events.addListener(chart, 'ready', function(e) {
    chart.setSelection([{
      row: 0,
      column: null
    }, {
      row: 1,
      column: null
    }, {
      row: 2,
      column: null
    }, {
      row: 3,
      column: null
    }, {
      row: 4,
      column: null
    }]);
  });
  chart.draw(data, options);
};

<div id="chart_div"></div>


.chart {
  background-color: #eee;
}

https://jsfiddle.net/dahlin/cfpyu9m5/11/

Answer 1

试试这个，

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

export const data = [
  ["Task", "Hours per Day"],
  ["Work", 11],
  ["Eat", 2],
  ["Commute", 2],
  ["Watch TV", 2],
  ["Sleep", 7]
];

export const options = {
  title: "My Daily Activities",
  tooltip: {
    trigger: "selection"
  }
};

export default function App() {
  return (
    <Chart
      chartType="PieChart"
      data={data}
      options={options}
      width={"100%"}
      height={"400px"}
      chartEvents={[
        {
          eventName: "ready",
          callback: ({ chartWrapper, google }) => {
            const chart = chartWrapper.getChart();
            chart.setSelection([
              {
                row: 0,
                column: null
              },
              {
                row: 1,
                column: null
              },
              {
                row: 2,
                column: null
              },
              {
                row: 3,
                column: null
              },
              {
                row: 4,
                column: null
              }
            ]);
          }
        }
      ]}
    />
  );
}

工作代码在这里 See the sandbox page