Мне нужна помощь.
Я хочу показать значения различных круговых диаграмм в индикаторе выполнения.
Я использую круговую диаграмму, котораяимеет 7 различных полей, скажем, «Music Composer», «Lyricist» и т. д., и все они должны находиться в фиксированной области в круговой диаграмме.Все эти поля имеют абсолютное значение 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">+</div>';
var minus = '<div id="min-' + dimensions[i] + '" class="adjust-button" data-i="' + i + '" data-d="1">−</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;
}
}
})();