内容简介:rechart入门
在没用react之前也行用的图标库就是haightchart或者echarts,当你转向react之后,你就该用用recharts了,一个基于react组件的组合图表库。
简介
Recharts 是一个基于react组件的组合图标库。
拥有三大特性:Composable(可组合的)、Reliable(可靠的)、Powerful(强大的);
-
Composable 快速用解耦的、可重用的React组件构建你的图表。
-
Reliable 一个在D3子模块基于SVG元素的轻量级依赖
-
Powerful 通过调整组件属性和传递自定义组件来自定义图表
安装方法
NPM安装
npm安装是最简单、最快速的开始使用Recharts的方法。这也是推荐的安装方式,对CommonJS的打包工具Webpack是绝配。
$ npm install recharts
注意:要在项目路径安装,意思就是安装局部的,不是全局的。
使用方法
用一个example来介绍
js代码 import React from 'react'; import {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend} from “recharts”; class SimpleLineChart extends React.Compent{ render () { const data = [ {name: 'Page A', uv: 4000, pv: 2400, amt: 2400}, {name: 'Page B', uv: 3000, pv: 1398, amt: 2210}, {name: 'Page C', uv: 2000, pv: 9800, amt: 2290}, {name: 'Page D', uv: 2780, pv: 3908, amt: 2000}, {name: 'Page E', uv: 1890, pv: 4800, amt: 2181}, {name: 'Page F', uv: 2390, pv: 3800, amt: 2500}, {name: 'Page G', uv: 3490, pv: 4300, amt: 2100}, ]; return ( <LineChart width={600} height={300} data={data} margin={{top: 5, right: 30, left: 20, bottom: 5}}> <XAxis dataKey="name"/> <YAxis/> <CartesianGrid strokeDasharray="3 3"/> <Tooltip/> <Legend /> <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{r: 8}}/> <Line type="monotone" dataKey="uv" stroke="#82ca9d" /> </LineChart> ); } } export default SimpleLineChart;
Tip
首先必须 进入官网 学习,刚入门先去看 Examples ,值得注意的是那上面的例子每一个都是一个应用,如果新手想集成进项目的话,格式按照我上面的例子来。然后就是每个例子右上角有个Edit in JSFiddle 点进去可以在线编辑,及时预览。这是新手学习react最好的地方。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- TiDB入门(四):从入门到“跑路”
- MyBatis从入门到精通(一):MyBatis入门
- MyBatis从入门到精通(一):MyBatis入门
- Docker入门(一)用hello world入门docker
- 赵童鞋带你入门PHP(六) ThinkPHP框架入门
- 初学者入门 Golang 的学习型项目,go入门项目
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
深入理解计算机系统(原书第2版)
(美)Randal E.Bryant、David O'Hallaron / 龚奕利、雷迎春 / 机械工业出版社 / 2011-1-1 / 99.00元
本书从程序员的视角详细阐述计算机系统的本质概念,并展示这些概念如何实实在在地影响应用程序的正确性、性能和实用性。全书共12章,主要内容包括信息的表示和处理、程序的机器级表示、处理器体系结构、优化程序性能、存储器层次结构、链接、异常控制流、虚拟存储器、系统级I/O、网络编程、并发编程等。书中提供大量的例子和练习,并给出部分答案,有助于读者加深对正文所述概念和知识的理解。 本书的最大优点是为程序......一起来看看 《深入理解计算机系统(原书第2版)》 这本书的介绍吧!