Question

我的图表的值范围从10到70000.由于70000太大，因此在图表中看不到小值，并且在悬停在其上时无法查看其标签。是否可以显示所有标签，而无需悬停或任何更好的解决方案。小提琴：https://jsfiddle.net/Sanal_5/e6zdk6jt/4/

[https://jsfiddle.net/Sanal_5/e6zdk6jt/4/][1]

Answer 1

您可以通过在创建的图表上调用generateLegend来绘制饼图的图例，并添加事件侦听以在图例中悬停时突出显示该段

$(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"
  }, {
    value: 10,
    color: "#d2d6de",
    highlight: "#d2d6de",
    label: "Navigator"
  }];
  var pieOptions = {
    segmentShowStroke: true,
    segmentStrokeColor: "#fff",
    segmentStrokeWidth: 2,
    percentageInnerCutout: 50,
    animationSteps: 100,
    animationEasing: "easeOutBounce",
    animateRotate: true,
    animateScale: false,
    responsive: true,
    maintainAspectRatio: true
  };
  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);

});

.box-body,
#graph-legend {
  width: 50%;
  float: left
}
#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>

Chartjs - Donut Chart标签，显示小值不可见

1 个答案: