如何制作React-Google图表双Y轴

Question

如何制作React-Google图表双Y轴

9

我正在使用 react-google-chart，我想要的是制作一个带有双Y轴的柱形图。我已经用纯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>

我的问题是关于React的，我想用React实现，但不知道如何实现materialChart.draw。

这是一个React代码，我希望将它转换成上面的样子。

编辑/更新：

在这里，我尝试使用React-google-chart构建一个具有双y轴的条形图，我已经使用纯JavaScript完成了这个操作，但是在React中遇到了一些问题。请检查我分享的例子。

- user11543110

你之前有使用过chartjs、d3 chart、echarts、ant design charts中的任何一个吗？ - moshfiqrony

@Md.MoshfiqurRahmanRony，我只使用过纯JavaScript的Google图表react-google_chart和Vue，但这里的要求有点不同，而且我在Google上也没有找到任何帮助。这就是为什么我在这里提出问题的原因。 - user11543110

2个回答

0

在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个值，因此第一个值是一月，第二个值是二月，以此类推。现在您拥有了所有需要的东西，只需像下面这样将其传递给组件即可

<Bar data={data2} />

完整的 CodeSandbox 链接在这里

Moshfiqrony 的巴德图表

- moshfiqrony

你在开玩笑吧，这与我想做的完全不同，如果每组的第四个柱子像“Jan 1: 4000”，“Jan 2: 3000”，“Jan 3:2000”和“Jan 4:10”一样具有可忽略的值，那么“Jan 4”将出现在你分享的图表中，它的值非常小，所以它不会显示出来，但是看看我的普通javascript示例，在那里它会显示出来，我只想使用React编写代码。 - user11543110

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- lry · Accepted Answer

只需将 chartType 属性的值设置为 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方法。

文档在这里： drawChart方法API 支持的图表类型枚举代码沙盒：

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