时间戳

首页 > 解决方案 > 如何使 react-google 图表双 y 轴

javascript - 如何使 react-google 图表双 y 轴

问题描述

我正在使用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

这是我想像上面一样转换它的反应代码

编辑/更新

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

标签： javascriptreactjsreact-google-charts

解决方案

只需将 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

支持的chartType的枚举

代码沙箱：

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

推荐阅读