个人中心
gpt4 book ai didi

javascript - Reactjs 仪表板 - 具有一组参数的多个实例

转载 作者：行者123 更新时间：2023-12-02 14:16:15 25 4
gpt4 key购买 nike

** 最新 fiddle -- http://jsfiddle.net/cfrapLma/28/

添加图表类型——是否有更好的方法来插入这一点——配置 json 是否通过 redux 进行处理——下一步是什么。有人尝试过使用reactjs和d3制作仪表板应用程序吗？

<小时/>

我正在开发一个reactjs项目，我热衷于输出一组div持有者，其中将包含 future 的图表参数，如宽度、高度、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>
    );
  }
});

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

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

//最新 fiddle http://jsfiddle.net/cfrapLma/24/

这是第一个原型(prototype)构建 - 我是否会让 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>

最佳答案

因此，您可以做的是创建 Fabric 方法，该方法将根据 config.type 返回相应的组件。

然后，您可以在渲染方法中迭代所有配置。还将配置作为 props 传递给您的组件 MultipleCharts。

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({
    getChart: function(config) {
        switch (config.type) {

            case 'piechart':
                return <PieChart width={config.width} height={config.height} service={config.service} />
            case 'barchart':
                return <BarChart width={config.width} height={config.height} service={config.service} />
        }
    },

    render: function () {
        var config = this.props.config;
        
        return (
            <div>
                {config.map((chartConfig, index) => {
                    return (
                        <div key={index} className={'holder' + index}>
                            {this.getChart(chartConfig)}
                        </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 config={config} />,
    document.getElementById('example')
);

请尽量避免在 React 组件中使用 data-* 属性。

关于javascript - Reactjs 仪表板 - 具有一组参数的多个实例，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39006469/

25 4 0
文章推荐： javascript - 使用 getJSON 将 Javascript 变量传递给 Django views.py
文章推荐： javascript - 谷歌地图缩放事件: Ignored attempt to cancel a touchend event with cancelable=false
文章推荐： javascript - DIV 淡入另一个 DIV
文章推荐： javascript - AngularJS - 将数据发布到 API 不起作用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com