反应谷歌图表中的动画不起作用

问题描述

我正在尝试在条形图中制作动画，但是它不起作用。我正在使用React谷歌图表库。如果我将图表类型更改为柱形图，则可以使用...这是我的代码：

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { Chart } from "react-google-charts"

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
      <Chart
        width={1000}
        height={500}
        chartType="Bar"
        loader={<div>Loading Chart</div>}
        data={[
          ['Date','Low','High'],['01/08',12,3],['02/08',5,10],['03/08',23,11],['04/08',1,13],['05/08',7,]}
        options={{
          chart: {
            title: 'Daily scan findings'
          },chartArea: { width: '80%' },fontName: 'Times New Roman',hAxis: {
            title: 'Date',minValue: 0,format: 'timeofday',},colors: ['#fbbd22','#fa534b'],animation: {
            startup: true,easing: 'linear',duration: 1500,enableInteractivity: false,legend: { position: 'left' },axes: {
            x: {
              0: { side: 'bottom',label: 'Percentage'} // Top x-axis.
            },y: {
              0: { side: 'left',label: 'Percentage'} // Top x-axis.
            }
          },vAxis: {
            title: 'Number of findings',}}
        rootProps={{ 'data-testid': '2' }}
      />
    </div>
  );
}

export default App;

有人知道我是否缺少选择吗？我不知道发生了什么我试图更改动画选项，但没有任何反应。预先谢谢你

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

react-google-charts reactjs reactjs