react-chartjs 사용법
사용 예
목표
다음 선형 차트를 표시합니다.
구성 요소 정의
index.jsxconst React = require('react')
const ReactDOM = require('react-dom')
const {Line} = require("react-chartjs")
const chartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40],
}
]
}
const App = () => (
<Line data={chartData} width="600" height="250"/>
)
ReactDOM.render(
<App/>, document.querySelector('#container'))
움직이다
index.html
<!DOCTYPE html>
<html>
<body>
<div id="container">
</div>
<script src="bundle.js"></script>
</body>
</html>
browserify로 빌드
babel 설정 파일을 만듭니다.
.babelrc{
"plugins": ["transform-react-jsx"]
}
빌드합니다.
npm init -y
npm i -D browserify babelify babel-plugin-transform-react-jsx react react-dom react-chartjs chart.js@^1.1.1
node_modules/browserify/bin/cmd.js -t babelify index.jsx -o bundle.js
브라우저에서 index.html을 엽니다.
응용 예 : 클릭 이벤트를 데리러
구성 요소 정의
App 구성 요소를 다음과 같이 변경합니다.
const App = React.createClass({
handleClick(e) {
console.log(this.Line.getPointsAtEvent(e)[0]);
},
render() {
return (<Line data={chartData} width="600" height="250" onClick={this.handleClick} ref={(ref) => this.Line = ref}/>)
}
})
const React = require('react')
const ReactDOM = require('react-dom')
const {Line} = require("react-chartjs")
const chartData = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40],
}
]
}
const App = () => (
<Line data={chartData} width="600" height="250"/>
)
ReactDOM.render(
<App/>, document.querySelector('#container'))
<!DOCTYPE html>
<html>
<body>
<div id="container">
</div>
<script src="bundle.js"></script>
</body>
</html>
{
"plugins": ["transform-react-jsx"]
}
npm init -y
npm i -D browserify babelify babel-plugin-transform-react-jsx react react-dom react-chartjs chart.js@^1.1.1
node_modules/browserify/bin/cmd.js -t babelify index.jsx -o bundle.js
구성 요소 정의
App 구성 요소를 다음과 같이 변경합니다.const App = React.createClass({
handleClick(e) {
console.log(this.Line.getPointsAtEvent(e)[0]);
},
render() {
return (<Line data={chartData} width="600" height="250" onClick={this.handleClick} ref={(ref) => this.Line = ref}/>)
}
})
getPointsAtEvent 함수가 있습니다. react-chartjs에서도 사용할 수 있습니다. onClick 속성을 사용하여 이벤트 핸들러를 바인딩할 수 있습니다. ref 속성을 사용해, Render한 아이 컴퍼넌트의 인스턴스를 취득할 수 있습니다. 동작 이미지
그래프에서 연설 거품이 표시된 위치에서 클릭하면 연설 거품이 나오는 요소의 값을 얻을 수 있습니다.
Chart.js 2.0 지원
Chart.js의 최신 버전은 v2.1.6입니다.
react-chartjs는 v1.1.1까지 지원됩니다.
Chart.js2.0 이상에 대한 대응은 chartjs-v2 브랜치에서 개발되고 있습니다.
package.json 에서 "react-chartjs": "git://github.com/venari/react-chartjs.git#chartjs-v2" 와 같이 브랜치를 직접 지정하면 사용할 수 있습니다.
What's the plan to upgrade to chart.js 2.0? · Issue #84 · jhudson8/react-chartjs 에서 개발 상황을 볼 수 있습니다.
슬슬 출시되면 기쁘네요.
참고
Reference
이 문제에 관하여(react-chartjs 사용법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ledsun/items/2158eb46eec10283e4ab텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
