1.代码
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>万能的React</title> 6 </head> 7 <body> 8 <script src="./react-0.13.2/react-0.13.2/build/react.js"></script> 9 <script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script> 10 <script type="text/jsx"> 11 var Sparkline = React.createClass({ 12 render: function () { 13 var width = 200; 14 var height = 200; 15 var path = this.generatePath(width, height, 16 this.props.points); 17 return ( 18 <svg width={width} height={height}> 19 <path d={path} stroke='#7ED321' strokeWidth='2' 20 fill='none'/> 21 </svg> ); 22 }, 23 generatePath: function (width, height, points) { 24 var maxHeight = 200; 25 var maxWidth = points.length; 26 return points.map(function (p, i) { 27 var xPct = i / maxWidth * 100; 28 var x = (width / 100) * xPct; 29 var yPct = 100 - (p / maxHeight * 100); var y = (height / 100) * yPct; 30 if (i === 0) { return 'M0,' + y; 31 } else { 32 return 'L' + x + ',' + y; } 33 }).join(' '); 34 } 35 }); 36 37 React.render(<Sparkline points={[1, 5, 15, 100, 150]}></Sparkline>, document.body); 38 </script> 39 </body> 40 </html>
2.运行结果
