在图例中包含百分比

Question

我如何将细分百分比添加到图表标签？

例 （百分比值不反映实际的图表，这只是一个例子。）

这是我当前模板。

<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul> 

Answer 1

您可以更新模板做一些额外的事情。 1得到所表示的总数，然后在显示标签的循环中打印该标签值的结果占总数的百分比。

丑串

legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% var total = segments.reduce(function(previousValue, currentValue){ return previousValue + currentValue.value;},0); for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%> <%=Math.floor((segments[i].value/total)*100)%>%<%}%></li><%}%></ul>" 

细分

首先得到显示利用总摸出百分比时（这里使用减少）

var total = segments.reduce(function(previousValue, currentValue){ 
    return previousValue + currentValue; 
},0); 

，然后总（使用地板这里只是为了确保我们不会收到一个可怕的数字，甚至可以在我们发言之前增加0.5来达到最接近的百分比）

Math.floor((segments[i].value/total)*100) 

实例（也fiddle）

$(function() { 
 
    var pieChartCanvas = $("#pieChart").get(0).getContext("2d"); 
 

 
    var PieData = [{ 
 
    value: 70000, 
 
    color: "#f56954", 
 
    highlight: "#f56954", 
 
    label: "Chrome" 
 
    }, { 
 
    value: 6000, 
 
    color: "#00a65a", 
 
    highlight: "#00a65a", 
 
    label: "IE" 
 
    }, { 
 
    value: 4000, 
 
    color: "#f39c12", 
 
    highlight: "#f39c12", 
 
    label: "FireFox" 
 
    }, { 
 
    value: 4000, 
 
    color: "#00c0ef", 
 
    highlight: "#00c0ef", 
 
    label: "Safari" 
 
    }, { 
 
    value: 3000, 
 
    color: "#3c8dbc", 
 
    highlight: "#3c8dbc", 
 
    label: "Opera" 
 
    }]; 
 
    var pieOptions = { 
 
    segmentShowStroke: true, 
 
    segmentStrokeColor: "#fff", 
 
    segmentStrokeWidth: 2, 
 
    percentageInnerCutout: 50, 
 
    animationSteps: 100, 
 
    animationEasing: "easeOutBounce", 
 
    animateRotate: true, 
 
    animateScale: false, 
 
    responsive: true, 
 
    maintainAspectRatio: true, 
 
    legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% var total = segments.reduce(function(previousValue, currentValue){ return previousValue + currentValue.value;},0); for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%> <%=Math.floor((segments[i].value/total)*100)%>%<%}%></li><%}%></ul>" 
 
    }; 
 
    var pieChart = new Chart(pieChartCanvas).Doughnut(PieData, pieOptions); 
 

 
    var helpers = Chart.helpers; 
 
    var legendHolder = document.getElementById('graph-legend'); 
 
    legendHolder.innerHTML = pieChart.generateLegend(); 
 

 
    // Include a html legend template after the module doughnut itself 
 
    helpers.each(legendHolder.firstChild.childNodes, function(legendNode, index) { 
 
    helpers.addEvent(legendNode, 'mouseover', function() { 
 
     var activeSegment = pieChart.segments[index]; 
 
     activeSegment.save(); 
 
     pieChart.showTooltip([activeSegment]); 
 
     activeSegment.restore(); 
 
    }); 
 
    }); 
 
    helpers.addEvent(legendHolder.firstChild, 'mouseout', function() { 
 
    pieChart.draw(); 
 
    }); 
 

 
    document.getElementById('graph-legend').appendChild(legendHolder.firstChild); 
 

 
});

#graph-legend ul { 
 
    list-style: none; 
 
} 
 
#graph-legend ul li { 
 
    display: block; 
 
    padding-left: 30px; 
 
    position: relative; 
 
    margin-bottom: 4px; 
 
    border-radius: 5px; 
 
    padding: 2px 8px 2px 28px; 
 
    font-size: 14px; 
 
    cursor: default; 
 
    -webkit-transition: background-color 200ms ease-in-out; 
 
    -moz-transition: background-color 200ms ease-in-out; 
 
    -o-transition: background-color 200ms ease-in-out; 
 
    transition: background-color 200ms ease-in-out; 
 
} 
 
#graph-legend li span { 
 
    display: block; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 20px; 
 
    height: 100%; 
 
    border-radius: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script> 
 
<div class="box-body"> 
 
    <canvas id="pieChart" width="787" height="300"></canvas> 
 
</div> 
 
<div id="graph-legend"></div>