包括传奇中的百分比

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)

示例(也是小提琴)

$(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>