如何制作 react-google 图表双 y 轴

Question

我正在使用 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, 17000, 5000, 4000],
    ['Nov', 20000, 17000, 5000, 4000],
    ['Dec', 20000, 17000, 5000, 4000]
  ]);

  var materialOptions = {
    width: 900,
    chart: {
      title: 'Nearby galaxies',
    },
    series: {

      0: {
        axis: 'test'
      } // Bind series 1 to an axis named 'brightness'.
    },

  };



  function drawMaterialChart() {
    var materialChart = new google.charts.Bar(chartDiv);
    materialChart.draw(data, google.charts.Bar.convertOptions(materialOptions));


  }


  drawMaterialChart();
};

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 800px; height: 500px;"></div>

我的问题是反应我想用反应来做但不知道如何实现 materialChart.draw

这是react code我要像上面那样转换

编辑/更新

在这里，我尝试使用 React-google-chart 和双 y 轴构建一个条形图，我已经使用普通 javascript 完成了这个，但是在使用 React 时遇到了问题。请查看我分享的示例。

Answer 1

只需将图表类型属性值设置为 Bar

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <Chart
          chartType="Bar"
          width="100%"
          height="400px"
          data={data}
          options={options}
          legendToggle
        />
      </div>
    );
  }
}

react-google-chart的实现基于google.visualization.drawChart方法。

文档在这里：

The drawChart method API

Enumerations of supported chartType

代码沙箱：

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

Answer 2

react 中最好的图表包是react-chartjs-2

要使用它，您需要将其添加为依赖项，然后像下面那样导入它

import { Bar } from "react-chartjs-2";

那么你需要一个数据配置如下图

    const data2 = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
      {
        label: "1",
        backgroundColor: "#1890ff",
        borderColor: "#1890ff",
        borderWidth: 1,
        hoverBackgroundColor: "#1890ff",
        hoverBorderColor: "#1890ff",
        data: [35000, 30000, 50000]
      },
      {
        label: "2",
        backgroundColor: "#612500",
        borderColor: "#612500",
        borderWidth: 1,
        hoverBackgroundColor: "#612500",
        hoverBorderColor: "#612500",
        data: [27000, 24000, 37000]
      },
      {
        label: "3",
        backgroundColor: "#389e0d",
        borderColor: "#389e0d",
        borderWidth: 1,
        hoverBackgroundColor: "#389e0d",
        hoverBorderColor: "#389e0d",
        data: [10000, 8000, 7000]
      },
      {
        label: "4",
        backgroundColor: "#c41d7f",
        borderColor: "#c41d7f",
        borderWidth: 1,
        hoverBackgroundColor: "#c41d7f",
        hoverBorderColor: "#c41d7f",
        data: [3000, 4000, 2000]
      }
    ]
  };

正如您在包含 4 个对象 的 数据集 上方看到的那样，这是因为它将为每个 创建 4 个柱月。数据有 4 个值，所以 first 值是 January，second 是二月等等。现在你拥有了所有你需要的东西，只需将它传递给你的组件，如下所示

<Bar data={data2} />

完整代码和框 link 在这里

Bard Charts by Moshfiqrony

如何制作 react-google 图表双 y 轴

How to make react-google chart dual-y-axis

javascript

reactjs

react-google-charts