Chartjs - 小圆圈的圆环图标签不可见

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>

上空盘旋