如何做出反应-google图表双轴
如何做出反应-google图表双轴
提问于 2020-03-16 03:45:06
我正在使用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>
我的问题是用react，我想用react来做，但是不知道如何实现materialChart.draw
这是反应码，我想像上面那样转换它
编辑/更新
在这里，我试图使用带有双y轴的React-google-chart来构建一个条形图，我已经用普通的javascript完成了这一工作，但是我要面对问题，用react来完成它。请查查我的例子。
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-03-20 02:06:52
只需将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>
);
}
}反应图的实现是基于google.visualization.drawChart方法的.
博士在这里：
代码沙箱：
https://codesandbox.io/s/react-google-charts-columnchart-with-click-handler-3ezk5
Stack Overflow用户
发布于 2020-03-20 06:28:47
react中最好的图表包是反应图-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]
}
]
};正如您在dataset上看到的，它包含4对象，这是因为它将为每个月创建4条条。数据有4个值，因此第一个值用于1月，第二用于2月，等等。现在，您拥有了所有需要的东西，只需将其传递给组件，就像下面这样
<Bar data={data2} />完整的代码框链接在这里
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60705377
复制相关文章
相似问题
腾讯云开发者
