1.代码

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="UTF-8">

     <title>万能的React</title>

 </head>

 <body>

     <script src="./react-0.13.2/react-0.13.2/build/react.js"></script>

     <script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>

     <script type="text/jsx">

         var Sparkline = React.createClass({

             render: function () {

                 var width = 200;

                 var height = 200;

                 var path = this.generatePath(width, height,

                 this.props.points);

                 return (

                 <svg width={width} height={height}>

                           <path d={path} stroke='#7ED321' strokeWidth='2'

                   fill='none'/>

                 </svg> );

             },

             generatePath: function (width, height, points) {

                 var maxHeight = 200;

                 var maxWidth = points.length;

                 return points.map(function (p, i) {

                 var xPct = i / maxWidth * 100;

                 var x = (width / 100) * xPct;

                 var yPct = 100 - (p / maxHeight * 100); var y = (height / 100) * yPct;

                 if (i === 0) { return 'M0,' + y;

                 } else {

                 return 'L' + x + ',' + y; }

                       }).join(' ');

             }

         });

         React.render(<Sparkline points={[1, 5, 15, 100, 150]}></Sparkline>, document.body);

     </script>

 </body>

 </html>

2.运行结果

用 React 编写SVG图表的更多相关文章

  1. 用 React 编写移动应用 React Native

    转载:用 React 编写移动应用 React Native ReactNative 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App.而且React ...

  2. react中将svg做成icon组件在其他模块调用

    开发前端页面,经常会有很多共用的图标icon,那么我们把它单独做成组件,以便后期重复调用! 首先在components 的icons文件夹下创建BaseIcon.js文件. 我们需要先在命令行安装gl ...

  3. 使用JavaScript和React编写原生移动应用

    使用JavaScript和React编写原生移动应用 React Native使你只使用JavaScript也能编写原生移动应用. 它在设计原理上和React一致,通过声明式的组件机制来搭建丰富多彩的 ...

  4. 在asp.net中如何自己编写highcharts图表导出到自己的服务器上来

    1.准备工作:网上下载highcharts导出的关键dll.      1).Svg.dll:因为highcharts的格式其实就是一个xml,采用svg的方式画图:      2).itextsha ...

  5. 用 React 编写的基于Taro + Dva构建的适配不同端（微信小程序、H5、React-Native 等）的时装衣橱

    前言 Taro 是一套遵循 React 语法规范的 多端开发 解决方案.现如今市面上端的形态多种多样,Web.React-Native.微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表 ...

  6. react 编写 基于ant.design 页面的参考笔记

    前言 因为我没有系统的学习 react,是边写边通过搜索引擎找相对的问题,看 ant.design的 中文文档 编写的一个单页面, 以下的笔记都是写 gksvideourlr 时记录的. 重新设定表单 ...

  7. React编写组件的局部样式

    我们都知道,在Vue的单文件组件中,style标签中编写的样式默认为全局样式,如果我们想编写局部样式, 使用一个scoped关键字就可以. 那么在React中怎么实现呢? (注: 这种方法必须使用类选 ...

  8. react实战 : react 与 svg

    有一个需求是这样的. 一个组件里若干个区块.区块数量不定. 区块里面是一个波浪效果组件,而这个一般用 SVG 做. 所以就变成了在 react 中使用 SVG 的问题. 首先是波浪效果需要的样式. . ...

  9. react native 的图表开源组件react-native-chart-android

    react-native-chart-android是一个图表开源组件,使用方法可以去这里 由于需要在数据上加上触摸事件,而github上没有说明看源码找了半天才找到下面的解决方法,特此记录一下: 在 ...

随机推荐

  1. node.js和socket.io纯js实现的即时通讯实例分享

    在这个例子中,其实node.js并没有真正起到服务器的作用,因为我们这里可以直接运行client.html文件,而不用输入url请求,当 然,要想输入url请求页面内容还需要加入请求静态文件的代码.这 ...

  2. How to understand ReferenceGroup control on Form[AX2012]

    在AX2012的Form开发中,微软引入了新的控件ReferenceGroup,它用在Lookup其他表RecId的时候显示更人性化的字段,它的使用还必须从表的索引说起.AX2012的表有这些索引(h ...

  3. Python LOGGING使用方法

    Python LOGGING使用方法 1. 简介 使用场景 场景 适合使用的方法 在终端输出程序或脚本的使用方法 print 报告一个事件的发生(例如状态的修改) logging.info()或log ...

  4. WPF自定义控件（三）——Window

    一样!先来看看效果吧: 怎么样?效果很好吧,而且不只是样式哟!所有系统窗体有的交互操作都可以实现! 但可惜...有很多和系统API有关的东西本人了解得并不多,所以这个窗体是基于他人的成果上产生的.关于 ...

  5. 浅谈 WPF布局

    我们首先来了解一下图形化用户界面(Graphic User Interface)也就是我们常常听到的GUI.举个简单的例子,同样是数据,我们可以用控制台程序加格式控制符等输出,但是这些都不如GUI来的 ...

  6. 管道和FIFO

    pipe 子进程从终端读取一个文件名, 通过管道将文件名传递给父进程 父进程收到文件名后, 读取文件内容并通过管道传递给子进程 子进程接收到文件内容并输出到终端 #include <stdio. ...

  7. Google面试题及答案

    1. 村子里有100对夫妻,其中每个丈夫都瞒着自己的妻子偷情...村里的每个妻子都能立即发现除自己丈夫之外的其他男人是否偷情,唯独不知道她自己的丈夫到底有没有偷情.村里的规矩不容忍通奸.任何一个妻子, ...

  8. 博主教你制作类似9patch效果的iOS图片拉伸

    下面张图片,本来是设计来做按钮背景的:   button.png,尺寸为:24x60 现在我们把它用作为按钮背景,按钮尺寸是150x50: // 得到view的尺寸 CGSize viewSize = ...

  9. WPF TextBox 的 EventTrigger & 重写控件

    遇到一个需求,在textbox获得焦点的时候,调用一个外部的软键盘. 这可以用两个不同的方法来达到目的. 1.EventTrigger 首先定义一个Style <Style x:Key=&quo ...

  10. C#转换日期类型

    日期1999-5-31 11:20转换成 /Date(928120800000+0800)/ 其中928120800000实际上是一个1970 年 1 月 1 日 00:00:00至这个DateTim ...