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

代码语言：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" data-range-high-color="green">[0.0297,0.0267,0.0312,0.0330,0.0386,0.0347]</div>

<div class="js-report-sparkline" data-range-low-color="red" data-range-high-color="blue" style="width: 250px">[0.3767,0.8800,2.1001,1.1000,1.300,0.8800,2.1476]</div>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/d3.3.5.5.js"></script>
      <script  >
// Metric
$('.js-report-sparkline').each(function (sparklineId) {
  var th = $(this);

  // Instead of splitting with "," we are passing the data in JSON format
  // Because splitting may cause getting datas as string
  // And that breaks scale calculators
  // Also this chain clears the HTML content
  data = $.parseJSON(
  th.data("sparkline-data", th.text()).
  text('').
  data("sparkline-data")),


  // Get width and height of the container
  w = th.width(),
  h = th.height(),

  // Setting the margins
  // You may set different margins for X/Y
  xMargin = 30,
  yMargin = 15,

  // Scale functions
  // Setting the range with the margin
  y = d3.scale.linear().
  domain([d3.min(data), d3.max(data)]).
  range([yMargin, h - yMargin]),
  x = d3.scale.linear().
  domain([0, data.length - 1]).
  range([xMargin, w - xMargin]),

  // Scale functions for creating the gradient fill/stroke
  // Calculating the color according to data in the range of colors
  // That user has passed with the data-range-[high-low]-color attributes
  gradientY = d3.scale.linear().
  domain([d3.min(data), d3.max(data)]).
  range([th.data("range-low-color"), th.data("range-high-color")]),

  // This is a different margin than the one for the chart
  // Setting the gradient stops from 0% to 100% will cause wrong color ranges
  // Because data points are positioned in the center of containing rect
  percentageMargin = 100 / data.length,
  percentageX = d3.scale.linear().
  domain([0, data.length - 1]).
  range([percentageMargin, 100 - percentageMargin]),

  // Create S
  container = d3.select(this).append("div"),

  // Create tooltip
  tooltip = container.
  append("div").
  attr("class", "chart-tooltip"),

  // Create SVG object and set dimensions
  vis = container.
  append("svg:svg").
  attr("width", w).
  attr("height", h);

  // Create the group object and set styles for gradient definition
  // Which is about to add in a few.........完整代码请登录后点击上方下载按钮下载查看