如何更改制作动态饼图的状态?
问题描述:
我正在尝试制作一个动态饼图,它会根据滑块的变化进行更改。 我已经设置了一切但是我不能在它中引入状态,因为我是新的反应。我只是想当有人滑动滑块时,饼图也会根据滑块的值而改变。谁能帮我?如何更改制作动态饼图的状态?
<!DOCTYPE html>
<html>
\t <head>
\t \t <title>React Example without Babel </title>
\t \t <script src="https://npmcdn.com/[email protected]/dist/react.min.js"></script>
\t \t <script src="https://npmcdn.com/[email protected]/dist/react-dom.min.js"></script>
\t \t <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0-alpha1/JSXTransformer.js"></script>
\t \t <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-with-addons.js"></script>
\t \t <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
\t \t <link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet">
\t \t <style>
\t \t \t .pie{
\t \t \t \t fill:red;
\t \t \t }
\t \t </style>
\t </head>
\t <body>
\t \t <div class="container">
\t \t \t <div id="app"></div>
\t \t \t <div class="col-lg-5" id="slider"></div>
\t \t \t <div class="col-lg-6" id="pie_chart"></div>
\t \t </div>
\t \t <script type="text/jsx">
\t \t \t
\t \t \t class Header extends React.Component{
\t \t \t \t render(){
\t \t \t \t \t return (<div><h1 className='page-header'>{this.props.text}</h1></div>);
\t \t \t \t }
\t \t \t }
\t \t \t ReactDOM.render(<Header text='Dynamic Pie Chart'/>,document.getElementById('app'));
\t \t \t class Slider extends React.Component{
\t \t \t \t render(){
\t \t \t \t \t return (<div><input type='range' min='1' max='100' /></div>);
\t \t \t \t }
\t \t \t }
\t \t \t ReactDOM.render(<Slider />,document.getElementById('slider'));
\t \t \t var PropTypes = React.PropTypes;
\t \t \t var PieChart = React.createClass({
\t \t \t displayName: 'PieChart',
\t \t \t propTypes: {
\t \t \t \t className: PropTypes.string,
\t \t \t \t size: PropTypes.number,
\t \t \t \t slices: PropTypes.arrayOf(PropTypes.shape({
\t \t \t \t color: PropTypes.string.isRequired, // hex color
\t \t \t \t value: PropTypes.number.isRequired })).isRequired },
\t \t \t \t getDefaultProps: function getDefaultProps() {
\t \t \t \t \t return {
\t \t \t \t \t \t size: 200 };
\t \t \t \t \t },
\t \t \t \t
_renderPaths: function _renderPaths() {
var radCircumference = Math.PI * 2;
var center = this.props.size/2;
var radius = center - 1; // padding to prevent clipping
var total = this.props.slices.reduce(function (totalValue, slice) {
return totalValue + slice.value;
}, 0);
var radSegment = 0;
var lastX = radius;
var lastY = 0;
return this.props.slices.map(function (slice, index) {
var color = slice.color;
var value = slice.value;
// Should we just draw a circle?
if (value === total) {
return React.createElement('circle', {
r: radius,
cx: radius,
cy: radius,
fill: color,
key: index
});
}
if (value === 0) {
return;
}
var valuePercentage = value/total;
// Should the arc go the long way round?
var longArc = valuePercentage <= 0.5 ? 0 : 1;
radSegment += valuePercentage * radCircumference;
var nextX = Math.cos(radSegment) * radius;
var nextY = Math.sin(radSegment) * radius;
// d is a string that describes the path of the slice.
// The weirdly placed minus signs [eg, (-(lastY))] are due to the fact
// that our calculations are for a graph with positive Y values going up,
// but on the screen positive Y values go down.
var d = ['M ' + center + ',' + center, 'l ' + lastX + ',' + -lastY, 'a' + radius + ',' + radius, '0', '' + longArc + ',0', '' + (nextX - lastX) + ',' + -(nextY - lastY), 'z'].join(' ');
lastX = nextX;
lastY = nextY;
return React.createElement('path', { d: d, fill: color, key: index });
});
},
/**
* @return {Object}
*/
render: function render() {
var size = this.props.size;
var center = size/2;
return React.createElement(
'svg',
{ viewBox: '0 0 ' + size + ' ' + size },
React.createElement(
'g',
{ transform: 'rotate(-90 ' + center + ' ' + center + ')' },
this._renderPaths()
)
);
}
});
var slices = [
{ color: '#468966', value: 180 },
{ color: '#FFF0A5', value: 180 },
];
ReactDOM.render(<PieChart slices={slices} />, document.getElementById('pie_chart'));
\t \t
\t \t \t
\t \t </script>
\t </body>
</html>
答
嗨,请检查现在使用的代码的。您必须将您的幻灯片更改值传递给状态。我改变了一些代码。请检查。
<!DOCTYPE html>
<html>
<head>
<title>React Example without Babel </title>
<script src="https://npmcdn.com/[email protected]/dist/react.min.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0-alpha1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet">
<style>
.pie{
fill:red;
}
</style>
</head>
<body>
<div class="container">
<div id="app"></div>
<div class="col-lg-5" id="slider"></div>
<div class="col-lg-6" id="pie_chart"></div>
</div>
<script type="text/jsx">
class Header extends React.Component{
render(){
return (<div><h1 className='page-header'>{this.props.text}</h1></div>);
}
}
ReactDOM.render(<Header text='Dynamic Pie Chart'/>,document.getElementById('app'));
class Slider extends React.Component{
render(){
return (<div><input type='range' min='1' max='100' onChange = {this.props.sliderEvent} /></div>);
}
}
var PropTypes = React.PropTypes;
var PieChart = React.createClass({
displayName: 'PieChart',
propTypes: {
className: PropTypes.string,
size: PropTypes.number,
slices: PropTypes.arrayOf(PropTypes.shape({
color: PropTypes.string.isRequired, // hex color
value: PropTypes.number.isRequired })).isRequired },
getDefaultProps: function getDefaultProps() {
return {
size: 200 };
},
_renderPaths: function _renderPaths() {
var radCircumference = Math.PI * 2;
var center = this.props.size/2;
var radius = center - 1; // padding to prevent clipping
var total = this.props.slices.reduce(function (totalValue, slice) {
return totalValue + slice.value;
}, 0);
var radSegment = 0;
var lastX = radius;
var lastY = 0;
return this.props.slices.map(function (slice, index) {
var color = slice.color;
var value = slice.value;
// Should we just draw a circle?
if (value === total) {
return React.createElement('circle', {
r: radius,
cx: radius,
cy: radius,
fill: color,
key: index
});
}
if (value === 0) {
return;
}
var valuePercentage = value/total;
// Should the arc go the long way round?
var longArc = valuePercentage <= 0.5 ? 0 : 1;
radSegment += valuePercentage * radCircumference;
var nextX = Math.cos(radSegment) * radius;
var nextY = Math.sin(radSegment) * radius;
// d is a string that describes the path of the slice.
// The weirdly placed minus signs [eg, (-(lastY))] are due to the fact
// that our calculations are for a graph with positive Y values going up,
// but on the screen positive Y values go down.
var d = ['M ' + center + ',' + center, 'l ' + lastX + ',' + -lastY, 'a' + radius + ',' + radius, '0', '' + longArc + ',0', '' + (nextX - lastX) + ',' + -(nextY - lastY), 'z'].join(' ');
lastX = nextX;
lastY = nextY;
return React.createElement('path', { d: d, fill: color, key: index });
});
},
/**
* @return {Object}
*/
render: function render() {
var size = this.props.size;
var center = size/2;
return React.createElement(
'svg',
{ viewBox: '0 0 ' + size + ' ' + size },
React.createElement(
'g',
{ transform: 'rotate(-90 ' + center + ' ' + center + ')' },
this._renderPaths()
)
);
}
});
class App extends React.Component{
constructor(props){
super(props);
this.state = {
slices : [
{ color: '#468966', value: 180 },
{ color: '#FFF0A5', value: 180 },
]
};
//this.handleSliderEvent = this.bind.handleSliderEvent(this);
}
handleSliderEvent(e){
var slices1 = (360 * e.target.value)/100;
var slices2 = 360 - slices1;
var array1 = [
{ color: '#468966', value: slices1 },
{ color: '#FFF0A5', value: slices2 }
];
console.log(array1)
this.setState({slices: array1});
}
render(){
return(
<div>
<Slider sliderEvent = {this.handleSliderEvent.bind(this)}/>
<PieChart slices = {this.state.slices} />
</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('pie_chart'));
</script>
</body>
</html>
通过这个小提琴以及你的代码的工作版本。
答
嗨请检查下面的代码。它应该工作。
<!DOCTYPE html>
<html>
<head>
<script src="https://npmcdn.com/[email protected]/dist/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-with-addons.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
<script src="https://npmcdn.com/[email protected]/build/public/js/react-d3.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="page-header">Dynamic Pie Chart</h1>
<div id="slider" class="col-lg-6"></div>
<div id="container" class="col-lg-6">
</div>
</div>
</div>
</body>
<script type="text/babel">
class Chart extends React.Component{
render() {
var PieChart = rd3.PieChart;
//var pieData = [ {label: "First", value: 50}, {label: "Second", value: 50 }];
return (
<PieChart
data={this.props.data}
width={450}
height={400}
radius={110}
sectorBorderColor="white"
/>
)}
}
class Slider extends React.Component{
render(){
return (<div><input type='range' min='0' max='100' onChange = {this.props.sliderEvent} /></div>);
}
}
class App extends React.Component{
constructor(props){
super(props);
this.state = {
pieData : [
{label: "First", value: 50}, {label: "Second", value: 500 }
]
};
}
handleSliderEvent(e){
var slices1 = (360 * e.target.value)/100;
var slices2 = 360 - slices1;
var array1 = [
{ label: "First", value: slices1 },
{ label: "Second", value: slices2 }
];
this.setState({pieData: array1},function(){
console.log(this.state);
});
}
render(){
return(<div className="row">
<Slider sliderEvent = {this.handleSliderEvent.bind(this)}/>
<div className='col-lg-6'>
<Chart data = {this.state.pieData} />
</div>
</div>)
}
}
ReactDOM.render(<App/>, document.getElementById('container'));
</script>
</html>
当您将状态传递给您的组件时,它将作为道具提供给组件。所以你必须使用那些道具。
但即使滑块走到左侧的末端,绿色弧的一些部分是可见的 – shanu
我已经做到了,感谢您的帮助 – shanu
嘿suyesh我需要一些更多的帮助,如果你有空? – shanu