Chartjs-小数值的甜甜圈图标签不可见 [英] Chartjs - Donut Chart label for small values not visible

问题描述

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

Values for my Chart range from 10 to 70000. Since 70000 is too large, small values are not visible in the chart and I cannot view its label on hovering over it. Is it possible to show all labels, without having to hover or any better solution for this. fiddle: https://jsfiddle.net/Sanal_5/e6zdk6jt/4/

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

推荐答案

您可以通过在创建的图表上调用generateLegend来绘制饼图的图例，并添加一个事件侦听以将光标悬停在图例上以突出显示该细分

You could draw the legend for the pie chart by calling generateLegend on the created chart and add an event listen to highlight the segment when hovered over in the legend

$(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-小数值的甜甜圈图标签不可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！