sparkline下载 - sparkline源代码下载

sparkline

其他源码

1.0.0

下载

迷你图

使用 JavaScript 生成 SVG 迷你图，无需任何外部依赖。

安装

该库可作为 NPM 包使用。要安装它，请使用以下命令：

 npm install @fnando/sparkline --save

如果你正在使用 Yarn（你应该）：

 yarn add @fnando/sparkline

如果您要加载脚本而不编译脚本（例如 webpack），则必须直接调用sparkline.sparkline(svg, values, options) 。否则，您可以简单地import sparkline from "@fnando/sparkline"; 。

应用程序编程接口

`sparkline(svg, values, options = {})`

svg ：这是一个<svg>引用，必须包含三个必需的属性（ width 、 height和stroke-width ）。这些属性用于计算绘图区域。
values ：您可以提供响应.value的数字数组或对象数组。如果您有不同的数据结构，请参阅options.fetch 。
options ：此可选参数允许您进一步自定义迷你图。可用的选项有：
- fetch ：如果您有迷你图本身不支持的不同数据结构，请使用此函数返回值。
- onmousemove ：通过设置此回调函数，您将启用交互模式（除非您将options.interactive设置为false ）。回调签名是callback(event, datapoint) ，其中datapoint是一个包含值、x/y坐标和项目索引的对象。
- onmouseout ：每次鼠标离开 SVG 区域时都会调用此回调函数。您可以使用它来隐藏工具提示等内容。
- spotRadius ：设置光点半径。默认值为2 。
- cursorWidth ：设置光标宽度。默认值为2 。
- interactive ：当true时，这将启用交互模式。如果您提供onmousemove回调，则不必设置此选项。

用法

这是最小的工作示例：

 <!-- width, height and stroke-width attributes must be defined on the target SVG -->
< svg class =" sparkline " width =" 100 " height =" 30 " stroke-width =" 3 " > </ svg >

< script >
  sparkline ( document . querySelector ( ".sparkline" ) , [ 1 , 5 , 2 , 4 , 8 , 3 , 7 ] ) ;
</ script >

您可以通过直接为 SVG 元素设置属性或使用 CSS 来更改颜色，如下所示：

 /* just the line */
. sparkline {
  stroke : red;
  fill : none;
}

/* line with highlight area */
. sparkline {
  stroke : red;
  fill : rgba ( 255 , 0 , 0 , .3 );
}

/* change the spot color */
. sparkline--spot {
  stroke : blue;
  fill : blue;
}

/* change the cursor color */
. sparkline--cursor {
  stroke : orange;
}

/* style fill area and line colors using specific class name */
. sparkline--fill {
  fill : rgba ( 255 , 0 , 0 , .3 );
}

. sparkline--line {
  stroke : red;
}