chaussen

React中简单的数据图形化——学习如何制作一个进度条

原文链接: codeburst.io

React中简单的数据图形化——学习如何制作一个进度条

学习如何用React + SVG矢量图画的矩形在React应用程序中制作图形化数据

矩形。

照片由Samuel Zeller提供。

前言

上个月我参加了meetup的ReactJS在波士顿小组见面会,讨论了React框架中一些数据可视化策略。主持人是Adam Mark,他是MC10公司的用户界面工程师。Adam和大家分享的内容包括了一些时髦复杂的东西,却也有非常简单的。他在React框架中用SVG矢量矩形做了一个简单进度条,简单得让人难以置信,却又很清晰简洁。

如果只想要代码不想看教程,可以去Adam的GitHubGist主页,那里有全部React条部件(Meter Component)代码。

我们要制作什么?

我们要做的是数据进度条,要有不同颜色、形状、大小和动画效果:

对这个教程的内容有兴趣的话,我强烈推荐去看看我写的三大最好的React JS课程。在课程里可以学到如何构建一些大规模的,实际生活可用的react应用程序,非常酷。

SVG代码

我们的react组件要根据输入的变量动态地生成SVG代码。下面一个例子,显示了画进度条的SVG代码应该是怎么样的:

<svg width="100" height="10">
  <rect width="100" height="10" fill="#ccc" rx="0" ry="0"></rect>
  <rect width="20" height="10" fill="#0078bc" rx="0" ry="0"></rect></svg>

就这样。

定义了一个svg对象,它包含两个rect对象(矩形)。第一个矩形宽100像素,灰色。在这个矩形之上再渲染一个较小的蓝色矩形,只有20像素宽。画出来后看起来是这样的:

哇,进度条出来了,酷。

仅仅是在一个灰色矩形之上再渲染一个上色的矩形,就可以造出一个看起来很棒的进度条。

但怎么样才能动态生成这样的SVG代码呢?这时候就需要react了。把所有的数据通过属性(props)传给一个React组件,然后这个组件就能正确地渲染画出这些矩形了。

React项目建立

这个项目我们要用[create-react-app](https://github.com/facebookincubator/create-react-app)作为底子,在此基础上逐步做出一个可以运行的样板react应用程序:

create-react-app react-svg-meter
cd react-svg-meter
npm start

服务器程序启动后,就可以浏览这个地址[http://localhost:3000/](http://localhost:3000/),看到样板代码运行了。


现在开始才是好玩的部分。在src文件夹里创建一个文件叫Meter.js,导入react模块,并输出一个叫Meter(仪表)的函数。在这个函数里,目前只要返回一个test(测试)值就可以了。

import React from 'react';

var Meter = function (props) {
  return(
    <div>test</div>
  );
}

export default Meter;

现在,在app.js文件里导入这个函数:

`import Meter from './Meter';`

最后,修改一下app.js文件里的返回语句,让它返回这个Meter(仪表)组件:

return (
  <div className="App">
    <Meter />
  </div>
);

不错,第一步完成。现在浏览器访问这个地址[http://localhost:3000/](http://localhost:3000/),应该可以看到‘test’(测试)这个词。

Meter.js文件

Meter.js文件就是本程序神奇所在。不过实际上并不神奇,相当简单。首先,我们要设置一些默认属性:

var Meter = function (props) {
  var {
    percent = 0,         // 数字:0到1,包括0和1.用来填充百分比进度
    width = 100,         // 进度条宽度
    height = 10,         // 进度条高度
    rounded = true,      // 如果为真则用圆角
    color = "#0078bc",   // 填充颜色
    animate = false,     // 如果为真则使用动画效果
    label = null         // 无障碍浏览用的标签
  } = props;

  //...
}

每个属性起什么作用,上面的注释应该写得很清楚了。现在,我们可以用这些属性来动态地创建,并返回SVG图进度条。

想一想之前的代码,画出来的是进度为20%的蓝色进度条:

<svg width="100" height="10">
  <rect width="100" height="10" fill="#ccc" rx="0" ry="0"></rect>
  <rect width="20" height="10" fill="#0078bc" rx="0" ry="0"></rect></svg>

现在我们要把输入的固定值换成变量,并且返回这个SVG元素。看起来就是这样的:

return (
  <svg width={width} height={height} aria-label={label}>
    <rect width={width} height={height} fill="#ccc" rx={r} ry={r}/>
    <rect width={w} height={height} fill={color} rx={r} ry={r}   style={style}/>
  </svg>
);

可以看到,其中有几个变量需要计算一下:r(圆角),w(宽),和style(样式)。

  • r ——需要的话,创建圆角:
var r = rounded ? Math.ceil(height / 2) : 0;

  • w ——计算上色矩形的宽度,形成进度条效果:
var w = percent ? Math.max(height, width * Math.min(percent, 1)): 0;

  • style——如果需要,给进度条添加动画效果:
var style = animate ? { "transition": "width 500ms, fill 250ms" } : null;

现在一个进度条组件就做好了,它可以根据输入的属性动态地返回一个SVG图对象。如果没有属性传进来,组件会有默认值并返回一个进度为0%的灰色进度条。

从app.js文件中发送信息

现在还剩下一步,如何从app.js文件中把数据传过来。这里有个例子,说明了用app.js文件创建各种不同的进度条时,代码分别应该是怎么样的:

// 默认,空进度条
**<Meter />**

// 进度80%,圆角矩形
**<Meter percent={.8} />**

// 进度60%,矩形无圆角
**<Meter percent={.6} rounded={false} />**

// 进度40%,自定义大小,矩形无圆角
**<Meter percent={.4} width={250} height={17} rounded={false} />**

代码链接:

  • 在Adam的’s Gist主页上查看Meter.js文件。

  • 我的GitHub主页上可以看到整个React应用程序包括Meter.js文件。

  • Codepen上可以看到实际演示。

完成了

这只是运用React做出来的简单数据图形化。我每个星期都会发布一些文件和教程,想加到我每周一次的邮件通知列表里,请在这里输入你的电子邮件

如果对这类教程有兴趣,并且想学习怎么样用React制作更多时髦的东西,看看这里 三大最好的React JS课程

如果这个帖子有帮助,请点击几次下方的拍手?按钮来表示支持。⬇⬇