直接从codepen复制的甜甜圈代码不起作用

时间:2015-03-01 12:49:27

标签: javascript html css

我只是复制粘贴了这个代码。没有改变任何东西:

http://codepen.io/anon/pen/rapJzN 

但它不起作用。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        @import url(//fonts.googleapis.com/css?family=Oswald:400);

body {
  background: #222428;
  font-family: "Oswald", sans-serif;
}
h1 {
  color: #eee;
  text-align: center;
  margin: 20px 0;
  text-transform: uppercase;
}
.chart {
  margin: 0 auto;
  width: 450px;
  height: 450px;
  position: relative;
}
.doughnutTip {
  position: absolute;
  float: left;
  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);
  transform: all .3s;
  pointer-events: none;
}
.doughnutTip: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: .65; 
}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <h1>Is it useful to distinguish between "web apps" and "web sites"?</h1>
<div id="doughnutChart" class="chart"></div>
    </div>
        <script>
            $("#doughnutChart").drawDoughnutChart([
  {
      title: "Nope, It's all just the web",
      value: 4822,
      color: "#f3e32b"
  },
  {
      title: "Yep. They are different things with different concerns",
      value: 12339,
      color: "#35a8ff"
  }
            ]);
        </script>
    </form>
</body>
</html>

出了什么问题?我错过了什么吗?

我是否需要将其与某些内容相关联?或者下载一些文件?我是使用codepen的新手

2 个答案:

答案 0 :(得分:2)

你有2个问题。首先,你需要包含这样的jQuery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

其次,你需要包含drawDoughnutChart,在这里找到源文件:

https://github.com/githiro/drawDoughnutChart
祝你好运!

[编辑]这里有一些工作代码,但不是在HTML文件中包含JS,它应该像jQuery一样包含......

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <style>
        @import url(//fonts.googleapis.com/css?family=Oswald:400);

        body {
            background: #222428;
            font-family: "Oswald", sans-serif;
        }
        h1 {
            color: #eee;
            text-align: center;
            margin: 20px 0;
            text-transform: uppercase;
        }
        .chart {
            margin: 0 auto;
            width: 450px;
            height: 450px;
            position: relative;
        }
        .doughnutTip {
            position: absolute;
            float: left;
            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);
            transform: all .3s;
            pointer-events: none;
        }
        .doughnutTip: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: .65;
        }
    </style>
    <script type="application/javascript">
        /*!
         * jquery.drawDoughnutChart.js
         * Version: 0.4(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,
                            showTip: true,
                            showLabel: false,
                            ratioFont: 1.5,
                            shortInt: false,
                            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
                if (settings.showTip) {
                    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",
                                    height: summarySize + "px",
                                    "margin-left": -(summarySize / 2) + "px",
                                    "margin-top": -(summarySize / 2) + "px"
                                });
                var $summaryTitle = $('<p class="' + settings.summaryTitleClass + '">' + settings.summaryTitle + '</p>').appendTo($summary);
                $summaryTitle.css('font-size', getScaleFontSize( $summaryTitle, settings.summaryTitle )); // In most of case useless
                var $summaryNumber = $('<p class="' + settings.summaryNumberClass + '"></p>').appendTo($summary).css({opacity: 0});

                for (var i = 0, len = data.length; i < len; i++) {
                    segmentTotal += data[i].value;
                    $paths[i] = $(document.createElementNS('http://www.w3.org/2000/svg', 'path'))
                            .attr({
                                "stroke-width": settings.segmentStrokeWidth,
                                "stroke": settings.segmentStrokeColor,
                                "fill": data[i].color,
                                "data-order": i
                            })
                            .appendTo($pathGroup)
                            .on("mouseenter", pathMouseEnter)
                            .on("mouseleave", pathMouseLeave)
                            .on("mousemove", pathMouseMove)
                            .on("click", pathClick);
                }

                //Animation start
                animationLoop(drawPieSegments);

                //Functions
                function getHollowCirclePath(doughnutRadius, cutoutRadius) {
                    //Calculate values for the path.
                    //We needn't calculate startRadius, segmentAngle and endRadius, because base doughnut doesn't animate.
                    var startRadius = -1.570,// -Math.PI/2
                            segmentAngle = 6.2831,// 1 * ((99.9999/100) * (PI*2)),
                            endRadius = 4.7131,// startRadius + segmentAngle
                            startX = centerX + cos(startRadius) * doughnutRadius,
                            startY = centerY + sin(startRadius) * doughnutRadius,
                            endX2 = centerX + cos(startRadius) * cutoutRadius,
                            endY2 = centerY + sin(startRadius) * cutoutRadius,
                            endX = centerX + cos(endRadius) * doughnutRadius,
                            endY = centerY + sin(endRadius) * doughnutRadius,
                            startX2 = centerX + cos(endRadius) * cutoutRadius,
                            startY2 = centerY + sin(endRadius) * cutoutRadius;
                    var cmd = [
                        'M', startX, startY,
                        'A', doughnutRadius, doughnutRadius, 0, 1, 1, endX, endY,//Draw outer circle
                        'Z',//Close path
                        'M', startX2, startY2,//Move pointer
                        'A', cutoutRadius, cutoutRadius, 0, 1, 0, endX2, endY2,//Draw inner circle
                        'Z'
                    ];
                    cmd = cmd.join(' ');
                    return cmd;
                };
                function pathMouseEnter(e) {
                    var order = $(this).data().order;
                    if (settings.showTip) {
                        $tip.text(data[order].title + ": " + data[order].value)
                                .fadeIn(200);
                    }
                    if(settings.showLabel) {
                        $summaryTitle.text(data[order].title).css('font-size', getScaleFontSize( $summaryTitle, data[order].title));
                        var tmpNumber = settings.shortInt ? shortKInt(data[order].value) : data[order].value;
                        $summaryNumber.html(tmpNumber).css('font-size', getScaleFontSize( $summaryNumber, tmpNumber));
                    }
                    settings.onPathEnter.apply($(this),[e,data]);
                }
                function pathMouseLeave(e) {
                    if (settings.showTip) $tip.hide();
                    if(settings.showLabel) {
                        $summaryTitle.text(settings.summaryTitle).css('font-size', getScaleFontSize( $summaryTitle, settings.summaryTitle));
                        var tmpNumber = settings.shortInt ? shortKInt(segmentTotal) : segmentTotal;
                        $summaryNumber.html(tmpNumber).css('font-size', getScaleFontSize( $summaryNumber, tmpNumber));
                    }
                    settings.onPathLeave.apply($(this),[e,data]);
                }
                function pathMouseMove(e) {
                    if (settings.showTip) {
                        $tip.css({
                            top: e.pageY + settings.tipOffsetY,
                            left: e.pageX - $tip.width() / 2 + settings.tipOffsetX
                        });
                    }
                }
                function pathClick(e){
                    var order = $(this).data().order;
                    if (typeof data[order].action != "undefined")
                        data[order].action();
                }
                function drawPieSegments (animationDecimal) {
                    var startRadius = -PI / 2,//-90 degree
                            rotateAnimation = 1;
                    if (settings.animation && settings.animateRotate) rotateAnimation = animationDecimal;//count up between0~1

                    drawDoughnutText(animationDecimal, segmentTotal);

                    $pathGroup.attr("opacity", animationDecimal);

                    //If data have only one value, we draw hollow circle(#1).
                    if (data.length === 1 && (4.7122 < (rotateAnimation * ((data[0].value / segmentTotal) * (PI * 2)) + startRadius))) {
                        $paths[0].attr("d", getHollowCirclePath(doughnutRadius, cutoutRadius));
                        return;
                    }
                    for (var i = 0, len = data.length; i < len; i++) {
                        var segmentAngle = rotateAnimation * ((data[i].value / segmentTotal) * (PI * 2)),
                                endRadius = startRadius + segmentAngle,
                                largeArc = ((endRadius - startRadius) % (PI * 2)) > PI ? 1 : 0,
                                startX = centerX + cos(startRadius) * doughnutRadius,
                                startY = centerY + sin(startRadius) * doughnutRadius,
                                endX2 = centerX + cos(startRadius) * cutoutRadius,
                                endY2 = centerY + sin(startRadius) * cutoutRadius,
                                endX = centerX + cos(endRadius) * doughnutRadius,
                                endY = centerY + sin(endRadius) * doughnutRadius,
                                startX2 = centerX + cos(endRadius) * cutoutRadius,
                                startY2 = centerY + sin(endRadius) * cutoutRadius;
                        var cmd = [
                            'M', startX, startY,//Move pointer
                            'A', doughnutRadius, doughnutRadius, 0, largeArc, 1, endX, endY,//Draw outer arc path
                            'L', startX2, startY2,//Draw line path(this line connects outer and innner arc paths)
                            'A', cutoutRadius, cutoutRadius, 0, largeArc, 0, endX2, endY2,//Draw inner arc path
                            'Z'//Cloth path
                        ];
                        $paths[i].attr("d", cmd.join(' '));
                        startRadius += segmentAngle;
                    }
                }
                function drawDoughnutText(animationDecimal, segmentTotal) {
                    $summaryNumber
                            .css({opacity: animationDecimal})
                            .text((segmentTotal * animationDecimal).toFixed(1));
                    var tmpNumber = settings.shortInt ? shortKInt(segmentTotal) : segmentTotal;
                    $summaryNumber.html(tmpNumber).css('font-size', getScaleFontSize( $summaryNumber, tmpNumber));
                }
                function animateFrame(cnt, drawData) {
                    var easeAdjustedAnimationPercent =(settings.animation)? CapValue(easingFunction(cnt), null, 0) : 1;
                    drawData(easeAdjustedAnimationPercent);
                }
                function animationLoop(drawData) {
                    var animFrameAmount = (settings.animation)? 1 / CapValue(settings.animationSteps, Number.MAX_VALUE, 1) : 1,
                            cnt =(settings.animation)? 0 : 1;
                    requestAnimFrame(function() {
                        cnt += animFrameAmount;
                        animateFrame(cnt, drawData);
                        if (cnt <= 1) {
                            requestAnimFrame(arguments.callee);
                        } else {
                            settings.afterDrawed.call($this);
                        }
                    });
                }
                function Max(arr) {
                    return Math.max.apply(null, arr);
                }
                function Min(arr) {
                    return Math.min.apply(null, arr);
                }
                function isNumber(n) {
                    return !isNaN(parseFloat(n)) && isFinite(n);
                }
                function CapValue(valueToCap, maxValue, minValue) {
                    if (isNumber(maxValue) && valueToCap > maxValue) return maxValue;
                    if (isNumber(minValue) && valueToCap < minValue) return minValue;
                    return valueToCap;
                }
                function shortKInt (int) {
                    int = int.toString();
                    var strlen = int.length;
                    if(strlen<5)
                        return int;
                    if(strlen<8)
                        return '<span title="' +  int +  '">' + int.substring(0, strlen-3) + 'K</span>';
                    return '<span title="' + int  + '">' + int.substring( 0, strlen-6) + 'M</span>';
                }
                function getScaleFontSize(block, newText) {
                    block.css('font-size', '');
                    newText = newText.toString().replace(/(<([^>]+)>)/ig,"");
                    var newFontSize = block.width() / newText.length * settings.ratioFont;
                    // Not very good : http://stephensite.net/WordPressSS/2008/02/19/how-to-calculate-the-character-width-accross-fonts-and-points/
                    // But best quick way the 1.5 number is to affinate in function of the police
                    var maxCharForDefaultFont = block.width() - newText.length * block.css('font-size').replace(/px/, '') / settings.ratioFont;
                    if(maxCharForDefaultFont<0)
                        return newFontSize+'px';
                    else
                        return '';
                }
                /**
                 function getScaleFontSize(block, newText) {
        block.css('font-size', '');
        newText = newText.toString().replace(/(<([^>]+)>)/ig,"");
        var newFontSize = block.width() / newText.length;
        if(newFontSize<block.css('font-size').replace(/px/, ''))
            return newFontSize+'px';
        else
            return '';
    }*/
                return $this;
            };
        })(jQuery);
    </script>
</head>
<body>
<form id="form1" runat="server">
    <div>
        <h1>Is it useful to distinguish between "web apps" and "web sites"?</h1>
        <div id="doughnutChart" class="chart"></div>
    </div>
    <script>
        $("#doughnutChart").drawDoughnutChart([
            {
                title: "Nope, It's all just the web",
                value: 4822,
                color: "#f3e32b"
            },
            {
                title: "Yep. They are different things with different concerns",
                value: 12339,
                color: "#35a8ff"
            }
        ]);
    </script>
</form>
</body>
</html>

[EDIT2] 此外,使用您的浏览器开发人员工具(通常是F12)来查看出现的错误消息...在您的第一个示例中,错误是$ is undefined或其他内容,这通常意味着需要jQuery。之后它说drawDoughnutChart()未定义,快速谷歌搜索得到了我需要的源代码......

答案 1 :(得分:1)

只需在<head>开头添加:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/githiro/drawDoughnutChart/master/jquery.drawDoughnutChart.js"></script>

问题解决了:))