如何更改制作動態餅圖的狀態？

我正在嘗試製作一個動態餅圖，它會根據滑塊的變化進行更改。我已經設置了一切但是我不能在它中引入狀態，因爲我是新的反應。我只是想當有人滑動滑塊時，餅圖也會根據滑塊的值而改變。誰能幫我？如何更改制作動態餅圖的狀態？

<!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>

來源

2017-03-08 shanu

嗨，請檢查現在使用的代碼的。您必須將您的幻燈片更改值傳遞給狀態。我改變了一些代碼。請檢查。

<!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>

通過這個小提琴以及你的代碼的工作版本。

https://jsfiddle.net/oyqzms4c/

來源

2017-03-08 07:49:49 suyesh

但即使滑塊走到左側的末端，綠色弧的一些部分是可見的 – shanu

我已經做到了，感謝您的幫助 – shanu

嘿suyesh我需要一些更多的幫助，如果你有空？ – shanu

嗨請檢查下面的代碼。它應該工作。

<!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>

當您將狀態傳遞給您的組件時，它將作爲道具提供給組件。所以你必須使用那些道具。

來源

2017-03-10 03:20:23 suyesh

https：// jsfiddle.net/suyesht/34Lb66db/檢查此鏈接。 – suyesh

我已經完成了，http://stackoverflow.com/questions/42697027/how-to-add-setstate-in-react/42698233#42698233此處 – shanu

如何更改制作動態餅圖的狀態？

回答

相關問題