微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决反应谷歌图表中的动画不起作用

我正在尝试在条形图中制作动画,但是它不起作用。我正在使用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 举报,一经查实,本站将立刻删除。