闪光线

用 JavaScript 生成 SVG 火花线,而没有任何外部依赖性.

安装

这一自由作为国家防范机制的一揽子方案提供。 要安装,请使用下列命令:

npm install @fnando/sparkline --save

如果你用雅恩(你应该):

yarn add @fnando/sparkline

你得打电话 sparkline.sparkline(svg, values, options) 如果您是在不编译脚本的情况下加载脚本(例如. 网络软件包) (中文(简体) ). 否则你可以简单 import sparkline from "@fnando/sparkline";。 。 。 .

API 密码

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;
}

实例

静态

备查 https://codepen.io/fnando/full/KyZLLV/ (中文(简体) )

交互式

备查 https://codepen.io/fnando/full/GOQLVE/ 页面存档备份,存于互联网档案馆

许可证

(麻省理工学院的执照)

特此免费准许任何人获得 该软件和相关文件文件的副本(第2条) “软件”,在软件中不受限制地处理,包括 不限制使用、复制、修改、合并、出版、, 软件的分发、分版和/或销售,以及 允许获得软件的人这样做,但须符合下列条件: 下述条件:

上述版权通知和本许可通知应为: 列入软件的所有副本或大部分.

软件是提供的"是", 没有任何的警告, ,包括但不受限制的 紧迫性,特别是目的和非目的的证明. 绝对不能让警察或警察 (B) 合同行动、合同或其他责任, 产生、退出或与 软件或软件的使用或其他交易.