用 React 编写SVG图表

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.运行结果