漂亮的迷你图React组件:react-sparklines
漂亮的迷你图React组件:react-sparklines
Install
npm install react-sparklines --save
Run demo
npm install npm start http://localhost:8080
Use
<Sparklines data={[5, 10, 5, 20, 8, 15]} limit={5} width={100} height={20} margin={5}> </Sparklines>
Sparklines component is a container with the following properties:
data - the data set used to build the sparkline
limit - optional, how many data points to display at once
width, height - dimensions of the component
margin - optional, offset the chart
Basic Sparkline
<Sparklines data={[5, 10, 5, 20]}> <SparklinesLine color="blue" /> </Sparklines>
Bars
<Sparklines data={[5, 10, 5, 20]}> <SparklinesBars /> </Sparklines>
Spots
<Sparklines data={sampleData}> <SparklinesLine style={{ fill: "none" }} /> <SparklinesSpots /> </Sparklines>
Reference Line
<Sparklines data={sampleData}> <SparklinesLine /> <SparklinesReferenceLine type="mean" /> </Sparklines>
Normal Band
<Sparklines data={sampleData}> <SparklinesLine style={{ fill: "none" }}/> <SparklinesNormalBand /> </Sparklines>
本文由用户 jopen 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
转载本站原创文章,请注明出处,并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台,欢迎各类分享!