用 React 编写SVG图表
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图表的更多相关文章
- 用 React 编写移动应用 React Native
转载:用 React 编写移动应用 React Native ReactNative 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App.而且React ...
- react中将svg做成icon组件在其他模块调用
开发前端页面,经常会有很多共用的图标icon,那么我们把它单独做成组件,以便后期重复调用! 首先在components 的icons文件夹下创建BaseIcon.js文件. 我们需要先在命令行安装gl ...
- 使用JavaScript和React编写原生移动应用
使用JavaScript和React编写原生移动应用 React Native使你只使用JavaScript也能编写原生移动应用. 它在设计原理上和React一致,通过声明式的组件机制来搭建丰富多彩的 ...
- 在asp.net中如何自己编写highcharts图表导出到自己的服务器上来
1.准备工作:网上下载highcharts导出的关键dll. 1).Svg.dll:因为highcharts的格式其实就是一个xml,采用svg的方式画图: 2).itextsha ...
- 用 React 编写的基于Taro + Dva构建的适配不同端(微信小程序、H5、React-Native 等)的时装衣橱
前言 Taro 是一套遵循 React 语法规范的 多端开发 解决方案.现如今市面上端的形态多种多样,Web.React-Native.微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表 ...
- react 编写 基于ant.design 页面的参考笔记
前言 因为我没有系统的学习 react,是边写边通过搜索引擎找相对的问题,看 ant.design的 中文文档 编写的一个单页面, 以下的笔记都是写 gksvideourlr 时记录的. 重新设定表单 ...
- React编写组件的局部样式
我们都知道,在Vue的单文件组件中,style标签中编写的样式默认为全局样式,如果我们想编写局部样式, 使用一个scoped关键字就可以. 那么在React中怎么实现呢? (注: 这种方法必须使用类选 ...
- react实战 : react 与 svg
有一个需求是这样的. 一个组件里若干个区块.区块数量不定. 区块里面是一个波浪效果组件,而这个一般用 SVG 做. 所以就变成了在 react 中使用 SVG 的问题. 首先是波浪效果需要的样式. . ...
- react native 的图表开源组件react-native-chart-android
react-native-chart-android是一个图表开源组件,使用方法可以去这里 由于需要在数据上加上触摸事件,而github上没有说明看源码找了半天才找到下面的解决方法,特此记录一下: 在 ...
随机推荐
- struts2 知识梳理
写此文章时,最新struts2版本:2.3.6 一:struts.xml配置详解: 1.<include> 表示引入其他配置文件 2.<constant> 定义常量 3.< ...
- jquery中简易tab切换
<!doctype html> <html> <head> <title>test</title> <meta content=&qu ...
- Optimize str2date function
The job can be any string date format convert to AX date format. so that, Do not need to specify str ...
- java调用存储过程和函数
以对表test进行增,删,改,查进行说明:1.新建表test create table TEST ( TID NUMBER not null, TNAME VARCHAR2(32), TCODE VA ...
- SSHDroid(SSH Server for Android)通过PC或命令连接android
1.下载berserker.android.apps.sshdroid.apk .(如果你懒的下载,给我留言,我会发给你) 2.安装到手机,显示如图: 简单解释一下:一般android系统没有root ...
- APACHE 403 FORBIDDEN错误的解决办法之一
打开 apache的配置文件httpd.conf,找到这段代码: Options FollowSymLinksAllowOverride NoneOrder deny,allowDeny from a ...
- 在后台直接调用sql
表:FmCashStatistics EFContext db = new EFContext(); string strsql = "SELECT org_info_id,customer ...
- 信息传递--NOIP2015 day1 T2--暴力
这道题我用了判联通量加暴力,但联通量判炸了....然后从code[VS]上看到个不错的代码,就拿来了^_^... 基本思路是去掉环外的点,然后走每一个联通块. #include <iostrea ...
- MS SQL Server中的CONVERT日期格式化大全
CONVERT 将某种数据类型的表达式显式转换为另一种数据类型.由于某些需求经常用到取日期格式的不同. 现以下可在SQL Server中将日期格式化. SQL Server 支持使用科威特算法的阿拉伯 ...
- OpenLayers中的Layer概念和实践--Openlayers调用WMS服务
整理转自:http://hi.baidu.com/lixuweiok/item/c406a4e6a6d390e7fa42ba4b 本章我认为是这本书的真正开端,终于开始讲一些有意思的东西了.. 在这一 ...