d3实现带渐变迷你曲线图表效果代码-html代码-BFW代码库

d3实现带渐变迷你曲线图表效果代码

代码语言：html

所属分类：图表

代码描述：d3实现带渐变迷你曲线图表效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
<style>
.js-report-sparkline {
  width: 208px;
  height: 70px;
  margin: 50px auto;
  font-family: sans-serif;
  position: relative;
}
.js-report-sparkline * {
  box-sizing: border-box;
}
.js-report-sparkline path {
  stroke-width: 3;
  fill: none;
}
.js-report-sparkline .point {
  stroke-width: 2;
  transition: all 0.3s;
}
.js-report-sparkline .bar-rect {
  fill: transparent;
  stroke: none;
}
.js-report-sparkline .point.hover {
  stroke-width: 4;
}
.js-report-sparkline .chart-container {
  position: relative;
}
.js-report-sparkline .chart-tooltip {
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  left: 0;
  display: none;
  padding: 2px 5px;
  font-size: 12px;
  border-radius: 5px;
  border: 1px solid white;
  pointer-events: none;
}
.js-report-sparkline .chart-tooltip .title {
  z-index: 3;
  text-transform: uppercase;
  font-size: 13px;
}
.js-report-sparkline .bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: block;
  position: absolute;
  right: 5px;
  top: 13px;
}
</style>



</head>

<body >
  <div class="js-report-sparkline" data-range-low-color="orange".........完整代码请登录后点击上方下载按钮下载查看