Fatal编程技术网
  • javascript/
  • Javascript Reactjs dashboard-具有参数数组的多个实例

Javascript Reactjs dashboard-具有参数数组的多个实例

javascript reactjs

Javascript Reactjs dashboard-具有参数数组的多个实例,javascript,reactjs,Javascript,Reactjs,**最新小提琴-- 添加图表类型——是否有更好的方法向前推进——配置json是否可以通过redux处理——下一步是什么。以前是否有人尝试过使用reactjs和d3制作仪表板应用程序 我正在做一个reactjs项目，我渴望输出一组div持有者，其中将包含未来的图表参数，如宽度、高度、url服务 ++如何通过推拉多个参数来创建图表、占位符..的不同实例。。？ ++这是创建一组组件的仪表板的良好开端吗？我需要为我想要吸收的图表、大小和服务创建一个配置json //配置json [{

**最新小提琴--

添加图表类型——是否有更好的方法向前推进——配置json是否可以通过redux处理——下一步是什么。以前是否有人尝试过使用reactjs和d3制作仪表板应用程序

我正在做一个reactjs项目，我渴望输出一组div持有者，其中将包含未来的图表参数，如宽度、高度、url服务

++如何通过推拉多个参数来创建图表、占位符..的不同实例。。？ ++这是创建一组组件的仪表板的良好开端吗？我需要为我想要吸收的图表、大小和服务创建一个配置json

//配置json

 [{
        "width": 200,
        "height": 200,
        "type": "piechart",
        "serviceApi": "api.php?mode=GetCars"
    }, {
        "width": 100,
        "height": 100,
        "type": "barchart",
        "serviceApi": "api.php?mode=GetBoats"
    }]
我是否需要创建一个配置json来控制参数——一个需要呈现的图表数组

var MultipleCharts = React.createClass({
  render: function() {
    return (
      <div>
        <div className="holder1"><PieChart width={this.props.width} height={this.props.height} service={this.props.service}/></div>
        <div className="holder2"><PieChart width={this.props.width} height={this.props.height} service={this.props.service}/></div>
      </div>
    );
  }
});

var MultipleCharts=React.createClass({
render:function（）{
返回(
);
}
});
^这是一种硬编码方法，我需要循环和推送配置json，以便每个图表都有不同的属性

<div data-role="piechart" data-width=240 data-height=240 data-service="api.php?mode=GetCars">
//最新小提琴

这是第一个原型构建——我是否会让reactjs处理一堆图表——就好像这些信息来自配置json一样——就像仪表板设置一样

或者在模板上硬编码仪表板配置——并且reactjs调用图表工具

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>React Charts</title>
    <script src="https://npmcdn.com/react@15.3.0/dist/react.js"></script>
    <script src="https://npmcdn.com/react-dom@15.3.0/dist/react-dom.js"></script>
    <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
    <script src="https://npmcdn.com/jquery@3.1.0/dist/jquery.min.js"></script>
    <script src="https://npmcdn.com/remarkable@1.6.2/dist/remarkable.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
  </head>
  <body>

    <div id="example"></div>

    <script type="text/babel">

var config = [{
        "width": 200,
        "height": 200,
        "type": "piechart",
        "serviceApi": "api.php?mode=GetCars"
    }, {
        "width": 100,
        "height": 100,
        "type": "barchart",
        "serviceApi": "api.php?mode=GetBoats"
    }];


var MultipleCharts = React.createClass({
  render: function() {
    return (
      <div>
        <div className="holder1"><PieChart width={this.props.width} height={this.props.height} service={this.props.service}/></div>
        <div className="holder2"><BarChart width={this.props.width} height={this.props.height} service={this.props.service}/></div>
      </div>
    );
  }
});

var PieChart = React.createClass({
  componentDidMount: function() {
                var $this = $(ReactDOM.findDOMNode(this));
          console.log("rendered div now engage d3");
          // set el height and width etc.
  },
  render: function() {
    return (
      <div className="piechart" data-role="piechart" data-width={this.props.width} data-height={this.props.height} data-service={this.props.service}>pie.
       </div>
    );
  }
});




var BarChart = React.createClass({
  componentDidMount: function() {
                var $this = $(ReactDOM.findDOMNode(this));
          console.log("rendered div now engage d3");
          // set el height and width etc.
  },
  render: function() {
    return (
      <div className="barchart" data-role="barchart" data-width={this.props.width} data-height={this.props.height} data-service={this.props.service}>pie.
       </div>
    );
  }
});


ReactDOM.render(
  <MultipleCharts width="200" height="200" service="api.php?mode=GetCars"/>,
  document.getElementById('example')
);

    </script>


  </body>
</html>


反应图
变量配置=[{
“宽度”：200，
“高度”：200，
“类型”：“piechart”，
“serviceApi”：“api.php？mode=GetCars”
}, {
“宽度”：100，
“高度”：100，
“类型”：“条形图”，
“serviceApi”：“api.php？mode=getboots”
}];
var MultipleCharts=React.createClass({
render:function（）{
返回(
);
}
});
var PieChart=React.createClass({
componentDidMount:function（）{
var$this=$（ReactDOM.findDOMNode（this））；
console.log（“呈现的div现在接合d3”）；
//设置el高度和宽度等。
},
render:function（）{
返回(
馅饼
);
}
});
var BarChart=React.createClass({
componentDidMount:function（）{
var$this=$（ReactDOM.findDOMNode（this））；
console.log（“呈现的div现在接合d3”）；
//设置el高度和宽度等。
},
render:function（）{
返回(
馅饼
);
}
});
ReactDOM.render(
,
document.getElementById（'示例'）
);

因此，您可以创建fabric方法，该方法将基于
config.type
返回相应的组件

然后，您可以在render方法中迭代所有配置。
并将配置作为道具传递给组件MultipleCharts



var配置=[{
“宽度”：200，
“高度”：200，
“类型”：“piechart”，
“serviceApi”：“api.php？mode=GetCars”
}, {
“宽度”：100，
“高度”：100，
“类型”：“条形图”，
“serviceApi”：“api.php？mode=getboots”
}];
var MultipleCharts=React.createClass({
getChart:函数（配置）{
开关（config.type）{
“piechart”案例：
返回
“条形图”案例：
返回
}
},
渲染：函数（）{
var config=this.props.config；
返回(
{config.map（（chartConfig，index）=>{
返回(
{this.getChart（chartConfig）}
)
})}
);
}
});
var PieChart=React.createClass({
componentDidMount:函数（）{
var$this=$（ReactDOM.findDOMNode（this））；
console.log（“呈现的div现在接合d3”）；
//设置el高度和宽度等。
},
渲染：函数（）{
返回(
馅饼
);
}
});
var BarChart=React.createClass({
componentDidMount:函数（）{
var$this=$（ReactDOM.findDOMNode（this））；
console.log（“呈现的div现在接合d3”）；
//设置el高度和宽度等。
},
渲染：函数（）{
返回(
馅饼
);
}
});
ReactDOM.render(
,
document.getElementById（'示例'）

);所以，您可以做的是创建fabric方法，该方法将基于
config.type
返回相应的组件

然后，您可以在render方法中迭代所有配置。
并将配置作为道具传递给组件MultipleCharts



var配置=[{
“宽度”：200，
“高度”：200，
“类型”：“piechart”，
“serviceApi”：“api.php？mode=GetCars”
}, {
“宽度”：100，
“高度”：100，
“类型”：“条形图”，
“serviceApi”：“api.php？mode=getboots”
}];
var MultipleCharts=React.createClass({
getChart:函数（配置）{
开关（config.type）{
“piechart”案例：
返回
“条形图”案例：
返回
}
},
渲染：函数（）{
var config=this.props.config；
返回(
{config.map（（chartConfig，index）=>{
返回(
{this.getChart（chartConfig）}
)
})}
);
}
});
var PieChart=React.createClass({
componentDidMount:函数（）{
var$this=$（ReactDOM.findDOMNode（this））；
console.log（“呈现的div现在接合d3”）；
//设置el高度和宽度等。
},
渲染：函数（）{
返回(
馅饼
);
}
});
var BarChart=React.createClass({
componentDidMount:函数（）{
变量$this=$（已反应）

.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 80px;
}

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}

.App-intro {
  font-size: large;
}

@keyframes App-logo-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}



import React, { Component } from 'react';
import './App.css';

import BarChart from './BarChart';
import PieChart from './PieChart';
import LineChart from './LineChart';

// Allowed types
const typeMapping = {
  PieChart, // In ES6, it is the same as "PieChart": PieChart, 
  BarChart,
  LineChart
};

class App extends Component {

  getChart(config) {
    const { type, ...props } = config;
    return React.createElement(typeMapping[type], props);
  }

  render() {
      var config = this.props.config;

      return (
          <div>
              {config.map((chartConfig, index) => {
                  return (
                      <div key={index} className={'holder' + index}>
                          {this.getChart(chartConfig)}
                      </div>
                  )
              })}
          </div>
      );
  }
}

export default App;



//barchart
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
var $ = require("jquery");

class BarChart extends Component {
    componentDidMount() {
        var $this = $(ReactDOM.findDOMNode(this));
        console.log("rendered div now engage d3", $this);
        // set el height and width etc.
    }

    render() {
        return (
            <div className="barchart" data-role="barchart" data-width={this.props.width} data-height={this.props.height}
                data-service={this.props.serviceApi}>bar.
            </div>
        );
    }
};

export default BarChart;



body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.piechart{
  background: pink;
  width: 100px;
  height: 50px;
  border: 1px solid black;
}

.barchart{
  background: green;
  width: 100px;
  height: 50px;
  border: 1px solid black;
}

.linechart{
  background: purple;
  width: 100px;
  height: 50px;
  border: 1px solid black;
}



import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

var config = [{
  "type": "PieChart",
  "width": 200,
  "height": 200,
  "serviceApi": "api.php?mode=GetCars"
}, {
  "type": "BarChart",
  "width": 100,
  "height": 100,
  "serviceApi": "api.php?mode=GetBoats"
}, {
  "type": "LineChart",
  "width": 100,
  "height": 100,
  "serviceApi": "api.php?mode=GetBoats"
}];

ReactDOM.render(
  <App config={config} />,
  document.getElementById('root')
);



//linechart
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
var $ = require("jquery");

class LineChart extends Component {
    componentDidMount() {
        var $this = $(ReactDOM.findDOMNode(this));
        console.log("rendered div now engage d3", $this);
        // set el height and width etc.
    }

    render() {
        return (
            <div className="linechart" data-role="linechart" data-width={this.props.width} data-height={this.props.height}
                data-service={this.props.serviceApi}>line.
            </div>
        );
    }
};

export default LineChart;



    //piechart
    import React, { Component } from 'react';
    import ReactDOM from 'react-dom';
    var $ = require("jquery");

    class PieChart extends Component {
        componentDidMount() {
            var $this = $(ReactDOM.findDOMNode(this));
            console.log("rendered div now engage d3", $this);
            // set el height and width etc.



            var dataset = {
              apples: [53245, 28479, 19697, 24037, 40245],
            };

            var width = 460,
                height = 300,
                radius = Math.min(width, height) / 2;

            var color = d3.scale.category20();

            var pie = d3.layout.pie()
                .sort(null);

            var arc = d3.svg.arc()
                .innerRadius(radius - 100)
                .outerRadius(radius - 50);

            var svg = d3.select($this[0]).append("svg")
                .attr("width", width)
                .attr("height", height)
                .append("g")
                .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

            var path = svg.selectAll("path")
                .data(pie(dataset.apples))
              .enter().append("path")
                .attr("fill", function(d, i) { return color(i); })
                .attr("d", arc);


        }

        render() {
            return (
                <div className="piechart" data-role="piechart" data-width={this.props.width} data-height={this.props.height}
                    data-service={this.props.serviceApi}>pie.
                </div>
            );
        }
    };

    export default PieChart;