IT技术 - React-google-chart 不接受选项 - 吾爱随笔录

React-google-chart 不接受选项

IT技术 javascript reactjs react-google-charts

2021-05-27 03:02:06

我react-google-chart用于以图形形式（条形图）显示我的数据，根据要求，我必须制作一个dual-y-axis chart

我已经制作了那个图表，但问题是该图表没有占用options. Bar当我放置图表时它是一个图表，因为ColumnChart它正在接受选项但不呈现为dual-y-axis-chart，如果我将其Bar作为图表类型放置，则它不接受选项

我缺少什么？这是我的代码：

import React from "react";
import ReactDOM from "react-dom";
import Chart from "react-google-charts";
const data = [
  ["Month", "CTC", "Gross Salary", "Variation of CTC", "Total No of Employes"],
  ["Jan", 35000, 27000, 10000, 3],
  ["feb", 30000, 24000, 8000, 4],
  ["Mar", 50000, 37000, 7000, 5],
  ["May", 20000, 17000, 5000, 6],
  ["June", 20000, 17000, 5000, 5],
  ["July", 20000, 17000, 5000, 10],
  ["August", 20000, 17000, 5000, 7],
  ["Sep", 20000, 17000, 5000, 5],
  ["Nov", 20000, 17000, 5000, 5],
  ["Dec", 20000, 17000, 5000, 9]
];
const options = {
  width: 900,
  title: "Nearby galaxies",
  curveType: "function",
  series: {
    3: {
      axis: "test"
    }
  },
  legend: { position: "bottom" }
};
class App extends React.Component {
  render() {
    return (
      <div className="App">
        <Chart
          chartType="Bar"
          width="100%"
          height="400px"
          data={data}
          options={options}
          legendToggle
        />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

工作示例

编辑

它不是即使考虑chartEvent无论如何我想要实现这个东西，如果还没有react过来，谷歌，图表然后任何其他库我愿意接受任何开源图表库。

2个回答

options因为ColumnChart是不同的。

请参见classicOptions示例https://developers.google.com/chart/interactive/docs/gallery/columnchart#dual-y-charts

因此，当您将选项替换为

const options = {
  width: 900,
  title: "Nearby galaxies",
  curveType: "function",
  seriesType: "bars",
  series: {
    3: { targetAxisIndex: 1 }
  },
  vAxes: {
    0: { title: "primary" },
    1: { title: "secondary" }
  },
  legend: { position: "bottom" }
};

https://codesandbox.io/s/react-google-charts-columnchart-with-click-handler-y6mo6

这里重要的是他们对Bar图表的评论：

注意这里我们使用 Bar 而不是 BarChart 来加载材料设计版本

^{https://react-google-charts.com/bar-chart#right-y-axis}

因此，选项略有不同。而不是传递title给根对象，它应该在chart.

options={{
  // Material chart options
  chart: {
    title: 'Population of Largest U.S. Cities',
    subtitle: 'Based on most recent and previous census data',
  },
}

但是，似乎它不尊重所有选项（legend例如）。

关于width，您将widthprop设置为，100%并将选项设置为900px。设置width, use宽度`props。

例子：

const data = [
  ["Month", "CTC", "Gross Salary", "Variation of CTC", "Total No of Employes"],
  ["Jan", 35000, 27000, 10000, 3],
  ["feb", 30000, 24000, 8000, 4],
  ["Mar", 50000, 37000, 7000, 5],
  ["May", 20000, 17000, 5000, 6],
  ["June", 20000, 17000, 5000, 5],
  ["July", 20000, 17000, 5000, 10],
  ["August", 20000, 17000, 5000, 7],
  ["Sep", 20000, 17000, 5000, 5],
  ["Nov", 20000, 17000, 5000, 5],
  ["Dec", 20000, 17000, 5000, 9]
];
const options = {
  chart: {
    title: "Nearby galaxies",
    legend: { position: "bottom" }
  },
  curveType: "function",
  series: {
    3: {
      axis: "test"
    }
  }
};
class App extends React.Component {
  render() {
    return (
      <div className="App">
        <Chart
          chartType="Bar"
          width={900}
          height="400px"
          data={data}
          options={options}
          legendToggle
        />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

https://codesandbox.io/s/react-google-charts-columnchart-with-click-handler-4dywj

你可以ColumnChart改用。使用此图表，您将能够自定义图例位置等

const options = {
  title: "Nearby galaxies",
  legend: { position: "bottom" },
  curveType: "function",
};

https://codesandbox.io/s/react-google-charts-columnchart-with-click-handler-wltpt

我不确定seriesprops。我没有在文档中看到它。

其它你可能感兴趣的问题

上一篇如何使用 webpack 将 firebase 云消息传递到 ReactJS 项目中下一篇(ReactJS) 如何获取日期类型的输入的输入值？