简介
@haroenv/react-sparklines是一个React组件，用于创建交互式的Sparkline图表，也就是折线图，支持颜色自定义、线宽、最小/最大值的调整、标签等。使用@haroenv/react-sparklines，您可以轻松地将Sparkline图表添加到您的网站或应用程序中，以便更好地展示和分析数据。
安装
使用npm安装@haroenv/react-sparklines：
npm install @haroenv/react-sparklines --save
用法
@haroenv/react-sparklines的用法很简单。只需要引入组件并传入相关参数即可。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ----------- --------------- -------------- - ---- ----------------------------
----- --- ------- --------------- -
-------- -
----- ---- - --- --- -- --- --- --- ----
------ -
-----
-------------------
----------- ------------
--------------- ----------- --
--------------- --
-------------
------
--
-
-
-------------------- --- --------------------------------在上面的示例代码中，我们首先定义数据data，然后在Sparklines组件中传入数据。接着，我们可以设置SparklinesLine和SparklinesBars的颜色等参数。
参数
@haroenv/react-sparklines组件支持以下参数：
data
必填项。传入折线图的数据，可以是数字数组或对象数组。如：[1, 5, 32, 6, 12, 2]、[{x: 1, y: 5}, {x: 2, y: 10}]等。
limit
可选项。限制折线图的长度，当数据过多时可以通过这个参数来截取部分数据。如：limit={10}，表示折线图只显示前10个数据。
width
可选项。设置折线图的宽度。如：width={100}。
height
可选项。设置折线图的高度。如：height={50}。
margin
可选项。设置折线图的边距。如：margin={5}。
min
可选项。设置折线图的最小值。如：min={0}。
max
可选项。设置折线图的最大值。如：max={100}。
percentile
可选项。用于计算折线图上10、50和90百分位的值。如：percentile={[0.1, 0.5, 0.9]}。
color
可选项。用于设置SparklinesLine和SparklinesBars的颜色。如：color="red"。
style
可选项。用于设置折线图的样式。如：style={{ fill: "none" }}。
onNearestX
可选项。当鼠标移到折线图上时，调用此函数获取折线图上最近的X点的值。如：
onNearestX={(value, data) => {
console.log("Nearest X-point value:", value);
}};示例
下面是一个使用了@haroenv/react-sparklines的示例，将数据生成Sparkline折线图：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ----------- --------------- -------------- - ---- ----------------------------
----- --- ------- --------------- -
-------- -
----- ---- - --- --- -- --- --- --- ----
----- ----- - --
----- ----- - - ------------ -- ------- ---------- ----- ------ --
------ -
-----
-------------------
----------- ----------- ------------- --------------
--------------- ----------- --
--------------- --
-------------
------
--
-
-
-------------------- --- --------------------------------在上面的示例代码中，我们传入了数据data，并设置了折线图的长度limit和样式style。接着，我们设置SparklinesLine的颜色为红色，SparklinesBars没有指定颜色，所以默认为灰色。
总结
@haroenv/react-sparklines是一个非常方便的React组件，用于创建交互式的Sparkline图表。本文介绍了@haroenv/react-sparklines的安装和用法，并且详细地讲解了其支持的参数。如果你正在寻找一种简单便捷的方式展示数据，@haroenv/react-sparklines绝对值得一试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562a481e8991b448dfdf9