odometer+Chart实现实时曲线图和数字滚动图表效果代码-html代码-BFW代码库

odometer+Chart实现实时曲线图和数字滚动图表效果代码

代码语言：html

所属分类：图表

代码描述：odometer+Chart实现实时曲线图和数字滚动图表效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/odometer-theme-minimal.css">

    <style>
        body, html {
          height: 100%;
        }
        
        body {
          background: #eeeded;
          font-family: "Roboto";
          font-size: 18px;
        }
        
        .wrap {
          display: flex;
          align-items: center;
          justify-content: center;
          height: 100%;
        }
        
        .spark-card {
          height: 300px;
          width: 300px;
          position: relative;
          background: #2980b9;
          color: white;
          overflow: hidden;
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
        }
        .spark-card .spark-card-metric {
          text-transform: uppercase;
          letter-spacing: 1.75pt;
          margin: 0 0 0 0;
          font-weight: normal;
          color: rgba(255, 255, 255, 0.45);
        }
        .spark-card .spark-card-heading {
          margin: 0;
          font-size: 2.75em;
          font-weight: normal;
          display: inline-block;
        }
        .spark-card .spark-card-delta {
          vertical-align: middle;
          position: relative;
          bottom: 10px;
          left: 10px;
        }
        .spark-card .spark-card-body {
          padding: 30px 30px 45px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.35);
        }
        
        canvas {
          position: absolute;
          bottom: -5px;
          left: -10px;
          right: 0;
        }
    </style>


</head>

<body>
    <div class="wrap">
        <div class="spark-card">
            <div class="spark-card-body">
                <h4 class="spark-card-metric">Page Views</h4>
                <div class="spark-card-value">
                    <h1 class="spark-card-heading">50,250</h1>
                    <span class="spark-card-delta">
          <span id="delta-value">5</span>%
                    <i class="fa fa-caret-up"></i>
       .........完整代码请登录后点击上方下载按钮下载查看