我想使用https://github.com/codesuki/react-d3-components上的图表 使用使用create-react-app创建的我的react应用。如何集成代码?
使用:
var BarChart = ReactD3.BarChart;
var data = [{
label: 'somethingA',
values: [{x: 'SomethingA', y: 10}, {x: 'SomethingB', y: 4}, {x: 'SomethingC', y: 3}]
}];
React.render(
<BarChart
data={data}
width={400}
height={400}
margin={{top: 10, bottom: 50, left: 50, right: 10}}/>,
document.getElementById('location')
);
要在以下位置生成图表:
import React from 'react';
class Lifecycle extends React.Component {
render() {
return (
<div>
{*/BarChart Appear Here*/}
</div>
);
}
}
export default Lifecycle;
答案 0 :(得分:3)
import React from "react";
import { BarChart } from "react-d3-components";
function BarChartContainer() {
let data = [
{
label: "somethingA",
values: [
{ x: "SomethingA", y: 10 },
{ x: "SomethingB", y: 4 },
{ x: "SomethingC", y: 3 }
]
}
];
return (
<BarChart
data={data}
width={400}
height={400}
margin={{ top: 10, bottom: 50, left: 50, right: 10 }}
/>
);
}
export default BarChartContainer;
用法
import React from "react";
import ReactDOM from "react-dom";
import BarChartContainer from "./BarChartContainer";
import "./styles.css";
function App() {
return (
<div className="App">
<BarChartContainer />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);