如何将每个标签的值添加到饼图

Question

我想添加饼图的标签值，但我只能看到没有值的标签。

这就是我看到的

但我希望看到每个字母的值

var ctx = $('#chart').find('canvas').get(0).getContext('2d');
var myPieChart = new Chart(ctx).Pie(data2,options);
var legend = myPieChart.generateLegend();
$('#chart').find('.legend').html(legend);

Answer 1

您可以将图例模板设置为包含标签旁边的值，如

legendTemplate : "<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%> : <%=segments[i].value%> <%}%></li><%}%></ul>",

＆＃13;

＆＃13;

var pieData = [{
    value: 24.8,
    color: "#40af49",
    label: "African American"
}, {
    value: 2.9,
    color: "#ac558a",
    label: "Other"
}, {
    value: 5.7,
    color: "#f05541",
    label: "Multi-Racial, Not Hispanic"
}, {
    value: 19.1,
    color: "#3ac2d0",
    label: "Hispanic/Latino"
}, {
    value: 6.5,
    color: "#faaf3c",
    label: "Asian"
}, {
    value: 41,
    color: "#4287b0",
    label: "White/Caucasian"
}];

var helpers = Chart.helpers;
var race = new Chart(document.getElementById("race").getContext("2d")).Doughnut(pieData, {
    tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>%",
    legendTemplate : "<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%> : <%=segments[i].value%>% <%}%></li><%}%></ul>",
    animateRotate: true
});
var legendHolder = document.createElement('div');
legendHolder.innerHTML = race.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 = race.segments[index];
        activeSegment.save();
        race.showTooltip([activeSegment]);
        activeSegment.restore();
    });
});
helpers.addEvent(legendHolder.firstChild, 'mouseout', function () {
    race.draw();
});

race.chart.canvas.parentNode.parentNode.appendChild(legendHolder.firstChild);

＆＃13;

<script src="http://www.chartjs.org/assets/Chart.min.js"></script>
<canvas id="race" width="250" height="250" style="width: 250px; height: 250px;"></canvas>

＆＃13;

＆＃13;

＆＃13;

编辑：

如果您想显示值所代表的百分比，您可以访问模板中的total，如此

legendTemplate: "<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%> : <%=(segments[i].value/total)*100%>% <%}%></li><%}%></ul>",

＆＃13;

＆＃13;

var data = [{
    value: 301,
    color: "#F7464A",
    highlight: "#FF5A5E",
    label: "Red"
}, {
    value: 120,
    color: "#FDB45C",
    highlight: "#FFC870",
    label: "Yellow"
}, {
    value: 0,
    color: "#3BA5D9",
    highlight: "#3BA5D9",
    label: "Blue"
}]






//canvases
var chart = document.getElementById("chart").getContext("2d");

var helpers = Chart.helpers;
//charts
var myChart = new Chart(chart).Doughnut(data, {
    tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",
    legendTemplate: "<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%> : <%= Math.floor(((segments[i].value/total)*100)+0.5) %>% <%}%></li><%}%></ul>",
    animateRotate: true
});


var legendHolder = document.createElement('div');
legendHolder.innerHTML = myChart.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 = race.segments[index];
        activeSegment.save();
        race.showTooltip([activeSegment]);
        activeSegment.restore();
    });
});
helpers.addEvent(legendHolder.firstChild, 'mouseout', function () {
    myChart.draw();
});

myChart.chart.canvas.parentNode.parentNode.appendChild(legendHolder.firstChild);

＆＃13;

<script src="http://www.quincewebdesign.com/cdn/Chart.js"></script>
<canvas id="chart"></canvas>

＆＃13;

＆＃13;

＆＃13;