Question

我需要一些帮助。

我想在进度栏中显示各种饼图的值。

我正在使用具有7个不同字段的饼图，例如“音乐作曲家”，“作词家”等，所有这些都必须位于饼图中的固定区域中。所有这些字段的绝对值都为0-100％。如果一个区域的100％区域为“红色”（随着颜色的减少），则该颜色仅应针对该特定区域为“白色”，而不会影响其他区域。并且该特定的饼图字段值应反映在相应的进度栏中。
在进度栏中，文本“ Music Composer”及其值应为“ 40％”，该文本应仅位于中间。当条形颜色“红色”变化时，文本颜色应为“白色”，当值变为0％时，条形背景应为“白色”，文本应为“黑色”。

作为参考，我在此附加一张图像。

这是我的HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pie Chart</title>
    <link href="example.css" rel="stylesheet" type="text/css">
    <script src="draggable-piechart.js"></script>
    <script src="example.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        body{
            background: #E1853D;
        }

    </style>
</head>
<body>
    <div class="row">
        <div class="col-md-4 pull-left">
            <div class="progress_main" style="margin-top: 30px;">
                <div class="progress_bar progress_composer" role="progressbar" value="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div id="piechart-controls">
                <canvas id="piechart" width="400" height="400">Your browser is too old!</canvas>
                <br />
                <table id="proportions-table"></table>
                <br />
                <p id="piechart-instructions">
                    Drag the circles or click the buttons to adjust the pie chart. If a segment has gone,
                    you can get it back by clicking it's '+' button.
                </p>

            </div>
        </div>
    </div>
</body>
</html>

这是我的CSS代码（example.css）：

* {
    font-family: Arial, sans-serif;
}

#piechart-controls {
    text-align: center;

}

#piechart-instructions {
    display: inline-block;
    width: 600px;
}


table {
    border-collapse: collapse;

    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;

    display: inline-block;

}

td, th {
    border: 1px solid blue;
    padding: 10px;
    margin: 0;

}

.adjust-button {
    width: 20px;
    height: 20px;
    font-size: 20px;
    line-height: 20px;
    text-align: center;
    display: inline-block;
    border: 1px solid grey;
    border-radius: 5px;
    margin: 1px;
}

var {
    width: 40px;
    display: inline-block;
}



.progress_main{
    height: 35px;
    margin-bottom: 22px;
    overflow: hidden;
    background-color: #f5f5f5;
    border-radius: 4px;
    margin-left: 30px;
}

.progress_bar{
    float: left;
    height: 100%;
    font-size: 12px;
    line-height: 30px;
    color: #FFFFFF;
    text-align: center;
}

.progress_bar:after {
  content: attr(value)'%';
}

.progress_composer{
    background-color: #FBA72E;

}
.progress_composer:before{
    content: "Music Composer";
    text-align: center;
}

这是我的JavaScript代码（example.js）

(function(){

    //IE9+ http://youmightnotneedjquery.com/
    function ready(fn) {
        if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
            fn();
        } else {
            document.addEventListener('DOMContentLoaded', fn);
        }
    }

    ready(setupPieChart);


    function setupPieChart() {


        var dimensions = knuthfisheryates2(['Music Composer', 'Lyricist', 'Singer', 'Instrument Player', 'Producer', 'Channel', 'Listner']);
        var randomProportions = generateRandomProportions(dimensions.length, 0.05);
        var proportions = dimensions.map(function(d,i) { return {
            label: d,
            proportion: randomProportions[i],
            collapsed: false,
            format: {
                label: d.charAt(0).toUpperCase() + d.slice(1) // capitalise first letter
            }
        }});


        var setup = {
            canvas: document.getElementById('piechart'),
            radius: 1,
            collapsing: true,
            proportions: proportions,
            drawSegment: drawSegmentOutlineOnly,
            onchange: onPieChartChange
        };

        var newPie = new DraggablePiechart(setup);

        function drawSegmentOutlineOnly(context, piechart, centerX, centerY, radius, startingAngle, arcSize, format, collapsed) {

            if (collapsed) { return; }

            // Draw segment
            context.save();
            var endingAngle = startingAngle + arcSize;
            context.beginPath();
            context.moveTo(centerX, centerY);
            context.arc(centerX, centerY, radius, startingAngle, endingAngle, false);
            context.closePath();

            context.fillStyle = '#2665da';
            context.fill();
            context.stroke();
            context.restore();

            // Draw label on top
            context.save();
            context.translate(centerX, centerY);
            context.rotate(startingAngle);

            var fontSize = Math.floor(context.canvas.height / 25);
            var dx = radius - fontSize;
            var dy = centerY / 10;

            context.textAlign = "right";
            context.font = fontSize + "pt Helvetica";
            context.fillText(format.label, dx, dy);
            context.restore();
        }

        function onPieChartChange(piechart) {

            var table = document.getElementById('proportions-table');
            var percentages = piechart.getAllSliceSizePercentages();

            var labelsRow = '<tr>';
            var propsRow = '<tr>';
            for(var i = 0; i < proportions.length; i += 1) {
                labelsRow += '<th>' + proportions[i].format.label + '</th>';

                var v = '<var>' + percentages[i].toFixed(0) + '%</var>';
                var plus = '<div id="plu-' + dimensions[i] + '" class="adjust-button" data-i="' + i + '" data-d="-1">&#43;</div>';
                var minus = '<div id="min-' + dimensions[i] + '" class="adjust-button" data-i="' + i + '" data-d="1">&#8722;</div>';
                propsRow += '<td>' + v + plus + minus + '</td>';
            }
            labelsRow += '</tr>';
            propsRow += '</tr>';

            table.innerHTML = labelsRow + propsRow;

            var adjust = document.getElementsByClassName("adjust-button");

            function adjustClick(e) {
                var i = this.getAttribute('data-i');
                var d = this.getAttribute('data-d');

                piechart.moveAngle(i, (d * 0.1));
            }

            for (i = 0; i < adjust.length; i++) {
                adjust[i].addEventListener('click', adjustClick);
            }

        }

        /*
         * Generates n proportions with a minimum percentage gap between them
         */
        function generateRandomProportions(n, min) {

            // n random numbers 0 - 1
            var rnd = Array.apply(null, {length: n}).map(function(){ return Math.random(); });

            // sum of numbers
            var rndTotal = rnd.reduce(function(a, v) { return a + v; }, 0);

            // get proportions, then make sure each propoertion is above min
            return validateAndCorrectProportions(rnd.map(function(v) { return v / rndTotal; }), min);


            function validateAndCorrectProportions(proportions, min) {
                var sortedProportions = proportions.sort(function(a,b){return a - b});

                for (var i = 0; i < sortedProportions.length; i += 1) {
                    if (sortedProportions[i] < min) {
                        var diff = min - sortedProportions[i];
                        sortedProportions[i] += diff;
                        sortedProportions[sortedProportions.length - 1] -= diff;
                        return validateAndCorrectProportions(sortedProportions, min);
                    }
                }

                return sortedProportions;
            }
        }

        /*
         * Array sorting algorithm
         */
        function knuthfisheryates2(arr) {
            var temp, j, i = arr.length;
            while (--i) {
                j = ~~(Math.random() * (i + 1));
                temp = arr[i];
                arr[i] = arr[j];
                arr[j] = temp;
            }

            return arr;
        }
    }

})();

如何在进度栏中存储饼图的值？

0 个答案: