我正在使用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 时遇到了问题。请检查我分享的示例。