jquery实现一个环形图表效果代码-html代码-BFW代码库

代码语言：html

所属分类：图表

代码描述：jquery实现一个环形图表效果代码

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

<html>
<head>
    <style>
@import url(//fonts.googleapis.com/css?family=Oswald:400);
        body {
            background: #222428;
            font-family: "Oswald", sans-serif;
        }
        .chart {
            position: absolute;
            width: 450px;
            height: 450px;
            top: 50%;
            left: 50%;
            margin: -225px 0 0 -225px;
        }
        .doughnutTip {
            position: absolute;
            min-width: 30px;
            max-width: 300px;
            padding: 5px 15px;
            border-radius: 1px;
            background: rgba(0,0,0,.8);
            color: #ddd;
            font-size: 17px;
            text-shadow: 0 1px 0 #000;
            text-transform: uppercase;
            text-align: center;
            line-height: 1.3;
            letter-spacing: .06em;
            box-shadow: 0 1px 3px rgba(0,0,0,0.5);
            pointer-events: none;
            &::after {
            position: absolute;
            left: 50%;
            bottom: -6px;
            content: "";
            height: 0;
            margin: 0 0 0 -6px;
            border-right: 5px solid transparent;
            border-left: 5px solid transparent;
            border-top: 6px solid rgba(0,0,0,.7);
            line-height: 0;
        }
    }
    .doughnutSummary {
        position: absolute;
        top: 50%;
        left: 50%;
        color: #d5d5d5;
        text-align: center;
        text-shadow: 0 -1px 0 #111;
        cursor: default;
    }
    .doughnutSummaryTitle {
        position: absolute;
        top: 50%;
        width: 100%;
        margin-top: -27%;
        font-size: 22px;
        letter-spacing: .06em;
    }
    .doughnutSummaryNumber {
        position: absolute;
        top: 50%;
        width: 100%;
        margin-top: -15%;
        font-size: 55px;
    }
    .chart path:hover {
        opacity: 0.65;
    }
</style>

</head>
<body>
<div id="doughnutChart" class="chart">

</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<script>
$(function(){
  $("#doughnutChart").drawDoughnutChart([
    { title: "Tokyo",         value : 120,  color: "#2C3E50" },
    { title: "San Francisco", value:  80,   color: "#FC4349" },
    { title: "New York",      value:  70,   color: "#6DBCDB" },
    { title: "London",        value : 50,   color: "#F7E248" },
    { title: "Sydney",        value : 40,   color: "#D7DADB" },
    { title: "Berlin",        value : 20,   color: "#FFF" }
  ]);
});
/*!
 * jquery.drawDoughnutChart.js
 * Version: 0.4.1(Beta)
 * Inspired by Chart.js(http://www.chartjs.org/)
 *
 * Copyright 2014 hiro
 * https://github.com/githiro/drawDoughnutChart
 * Released under the MIT license.
 * 
 */
;(function($, undefined) {
  $.fn.drawDoughnutChart = function(data, options) {
    var $this = this,
      W = $this.width(),
      H = $this.height(),
      centerX = W/2,
      centerY = H/2,
      cos = Math.cos,
      sin = Math.sin,
      PI = Math.PI,
      settings = $.extend({
        segmentShowStroke : true,
        segmentStrokeColor : "#0C1013",
        segmentStrokeWidth : 1,
        baseColor: "rgba(0,0,0,0.5)",
        baseOffset: 4,
        edgeOffset : 10,//offset from edge of $this
        percentageInnerCutout : 75,
        animation : true,
        animationSteps : 90,
        animationEasing : "easeInOutExpo",
        animateRotate : true,
        tipOffsetX: -8,
        tipOffsetY: -45,
        tipClass: "doughnutTip",
        summaryClass: "doughnutSummary",
        summaryTitle: "TOTAL:",
        summaryTitleClass: "doughnutSummaryTitle",
        summaryNumberClass: "doughnutSummaryNumber",
        beforeDraw: function() {  },
        afterDrawed : function() {  },
        onPathEnter : function(e,data) {  },
        onPathLeave : function(e,data) {  }
      }, options),
      animationOptions = {
        linear : function (t) {
          return t;
        },
        easeInOutExpo: function (t) {
          var v = t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t;
          return (v>1) ? 1 : v;
        }
      },
      requestAnimFrame = function() {
        return window.requestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          window.oRequestAnimationFrame ||
          window.msRequestAnimationFrame ||
          function(callback) {
            window.setTimeout(callback, 1000 / 60);
          };
      }();

    settings.beforeDraw.call($this);

    var $svg = $('<svg width="' + W + '" height="' + H + '" viewBox="0 0 ' + W + ' ' + H + '" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"></svg>').appendTo($this),
        $paths = [],
        easingFunction = animationOptions[settings.animationEasing],
        doughnutRadius = Min([H / 2,W / 2]) - settings.edgeOffset,
        cutoutRadius = doughnutRadius * (settings.percentageInnerCutout / 100),
        segmentTotal = 0;

    //Draw base doughnut
    var baseDoughnutRadius = doughnutRadius + settings.baseOffset,
        baseCutoutRadius = cutoutRadius - settings.baseOffset;
    $(document.createElementNS('http://www.w3.org/2000/svg', 'path'))
      .attr({
        "d": getHollowCirclePath(baseDoughnutRadius, baseCutoutRadius),
        "fill": settings.baseColor
      })
      .appendTo($svg);

    //Set up pie segments wrapper
    var $pathGroup = $(document.createElementNS('http://www.w3.org/2000/svg', 'g'));
    $pathGroup.attr({opacity: 0}).appendTo($svg);

    //Set up tooltip
    var $tip = $('<div class="' + settings.tipClass + '" />').appendTo('body').hide(),
        tipW = $tip.width(),
        tipH = $tip.height();

    //Set up center text area
    var summarySize = (cutoutRadius - (doughnutRadius - cutoutRadius)) * 2,
        $summary = $('<div class="' + settings.summaryClass + '" />')
                   .appendTo($this)
                   .css({ 
                     width: summarySize + "px",
                     .........完整代码请登录后点击上方下载按钮下载查看