Reactjs仪表板 - 带有参数数组的多个实例 [英] Reactjs dashboard - multiple instances with an array of parameters

查看：129
本文介绍了Reactjs仪表板 - 带有参数数组的多个实例的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

**最新小提琴 - http://jsfiddle.net/cfrapLma/28/ / p>

添加图表类型 - 是否有更好的方法来推动这一点 - 是否可以通过redux处理配置json - 下一步是什么？有没有人尝试过使用reactjs和d3制作仪表板应用程序？





我正在开发一个reactjs项目，我很热衷输出一组div持有者，包含未来的图表参数，如宽度，高度，网址服务。



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



// config json？

  [{
width：200，
height ：200，
type：piechart，
serviceApi：api.php？mode = GetCars
}，{
width：100， 
height：100，
type：barchart，
serviceApi：api.php？mode = GetBoats
}]

我是否需要创建一个控制参数的配置json - 一个需要渲染的图表数组？ / p> 

  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 c lassName =holder2>< PieChart width = {this.props.width} height = {this.props.height} service = {this.props.service} />< / div> 
< / div> 
）; 
} 
}）;

^这是一种硬编码方法，我需要循环并推送配置json，以便每个图表具有不同的属性。

 < div data-role =piechartdata-width = 240 data-height = 240 data -service = ？api.php模式= GetCars >

//最新小提琴
http://jsfiddle.net/cfrapLma/24/



这是第一个原型构建 - 是否我会让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（render div now d3）; 
 //设置el高度和宽度等。
}，
渲染：function（）{
 return（
 < div className =piechartdata-role =piechartdata-width = {this.props.width} data-height = {this.props.height} data-service = {this.props.service}>馅饼。
< / div> 
）; 
} 
}）; 
 
 
 
 
 var BarChart = React.createClass（{
 componentDidMount：function（）{
 var $ this = $（ReactDOM。 findDOMNode（this））; 
 console.log（render div now d3）; 
 //设置el高度和宽度等。
}，
 render：function（ ）{
 return（
< div className =barchartdata-role =barchartdata-width = {this.props.width} data-height = {this.props.height} data -service = {this.props.service}> pie。
< / div> 
）; 
} 
}）; 
 
 
 ReactDOM.render（
< MultipleCharts width =200height =200service =api.php？mode = GetCars/> ;, 
 document.getElementById（'example'）
）; 
 
< / script> 
 
 
< / body> 
< / html>


解决方案



好的，所以使用create-react-app作为基础..



我试过开始切割文件。当我尝试将PieChart / BarChart部件放入各自的文件时出现错误 - 我是否需要将它们修改为类？



/ src / App。 css 

  .App {
 text-align：center; 
} 
 
 .App-logo {
 animation：App-logo-spin无限20s线性; 
身高：80px; 
} 
 
 .App-header {
 background-color：＃222; 
身高：150px; 
填充：20px; 
颜色：白色; 
} 
 
 .App-intro {
 font-size：large; 
} 
 
 @keyframes App-logo-spin {
来自{transform：rotate（0deg）; } 
到{transform：rotate（360deg）; } 
}

/src/App.js 

 从'react'导入React，{Component}; 
 import'./App.css'; 
 
从'./BarChart'进口BarChart; 
从'./PieChart'导入PieChart; 
从'./LineChart'导入LineChart; 
 
 //允许类型
 const typeMapping = {
 PieChart，//在ES6中，它与PieChart相同：PieChart，
 BarChart，
 LineChart 
}; 
 
 class App扩展Component {
 
 getChart（config）{
 const {type，... props} = config; 
返回React.createElement（typeMapping [type]，props）; 
} 
 
 render（）{
 var config = this.props.config; 
 
返回（
< div> 
 {config.map（（chartConfig，index）=> {
 return（
< div key） = {index} className = {'holder'+ index}> 
 {this.getChart（chartConfig）} 
< / div> 
）
}）} 
< / div> 
）; 
} 
} 
 
 export default App;

/src/BarChart.js 

  // barchart 
 import来自'react'的React，{Component}; 
从'react-dom'导入ReactDOM; 
 var $ = require（jquery）; 
 
类BarChart扩展Component {
 componentDidMount（）{
 var $ this = $（ReactDOM.findDOMNode（this））; 
 console.log（渲染div现在搞d3，$ this）; 
 //设置高度和宽度等。
} 
 
 render（）{
 return（
< div className =barchartdata- role =barchartdata-width = {this.props.width} data-height = {this.props.height} 
 data-service = {this.props.serviceApi}> bar。
 < / div> 
）; 
} 
}; 
 
导出默认BarChart;

/src/Index.css 

 正文{
保证金：0; 
填充：0; 
 font-family：sans-serif; 
} 
 
 .piechart {
 background：pink; 
宽度：100px; 
身高：50px; 
边框：1px纯黑色; 
} 
 
 .barchart {
 background：green; 
宽度：100px; 
身高：50px; 
边框：1px纯黑色; 
} 
 
 .linechart {
 background：purple; 
宽度：100px; 
身高：50px; 
边框：1px纯黑色; 
}

/src/Index.js 

  import来自'react'的React; 
从'react-dom'导入ReactDOM; 
从'./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'）
）;

/src/LineChart.js 

  // linechart 
 import来自'react'的React，{Component}; 
从'react-dom'导入ReactDOM; 
 var $ = require（jquery）; 
 
 class LineChart扩展Component {
 componentDidMount（）{
 var $ this = $（ReactDOM.findDOMNode（this））; 
 console.log（渲染div现在搞d3，$ this）; 
 //设置高度和宽度等。
} 
 
 render（）{
 return（
< div className =linechartdata- role =linechartdata-width = {this.props.width} data-height = {this.props.height} 
 data-service = {this.props.serviceApi}> line。
 < / div> 
）; 
} 
}; 
 
导出默认LineChart;

/src/PieChart.js 

  // piechart 
 import来自'react'的React，{Component}; 
从'react-dom'导入ReactDOM; 
 var $ = require（jquery）; 
 
 class PieChart扩展Component {
 componentDidMount（）{
 var $ this = $（ReactDOM.findDOMNode（this））; 
 console.log（渲染div现在搞d3，$ this）; 
 //设置高度和宽度等。
 
 
 
 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 =piechartdata-role =piechart data-width = {this.props.width} data-height = {this.props.height} 
 data-service = {this.props.serviceApi}> pie。
< / div> 
）; 
} 
}; 
 
导出默认PieChart;


** LATEST Fiddle -- http://jsfiddle.net/cfrapLma/28/

adding chart types -- is there a better way to move this forward -- would the config json be handled via redux -- what is the next step forward. Has anyone tried making a dashboard application using reactjs and d3 before?

I am working on a reactjs project and I am keen to output a set of div holders that will contain future chart parameters, like width, height, url service.

++ How do I push and pull about multiple parameters to create different instances of a chart, placeholder..? ++ Is this a good start for creating a dashboard set of components do I need to create a configuration json for what charts, sizes, services I want to absorb.

//config json?

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

do I need to create a config json that will control the parameters - an array of charts that are needing to be rendered?

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>
    );
  }
});

^ this is a hard coded approach and I would need to loop and push through a configuration json so each chart has different properties.

<div data-role="piechart" data-width=240 data-height=240 data-service="api.php?mode=GetCars">

//Latest Fiddle http://jsfiddle.net/cfrapLma/24/

here is the first prototype build - whether I would have reactjs handle a stack of charts -- as if this information is coming from a configuration json -- like a dashboard setup.

Or the dashboard configuration is hardcoded on the template -- and reactjs invokes the charting tool.

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

解决方案

Alright so using the create-react-app as a base..

I've tried to start cutting up the files. I get an error when I try and put the PieChart/BarChart parts into their respective files -- do I need to modify them as a class?

/src/App.css

.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); }
}

/src/App.js

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;

/src/BarChart.js

//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;

/src/Index.css

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;
}

/src/Index.js

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')
);

/src/LineChart.js

//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;

/src/PieChart.js

    //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;

这篇关于Reactjs仪表板 - 带有参数数组的多个实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆