我已经尝试过所有堆栈上的帮助文件，有些帖子似乎让人操纵图例，但是我无法让图例全部出现，我不知道自己在做什么。
这是我的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Initso | ChartJS</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.5 -->
<link rel="stylesheet" href="../../bootstrap/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="../../dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="../../dist/css/skins/_all-skins.min.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- DONUT CHART -->
<div class="box box-danger">
<div class="box-header with-border">
<h3 class="box-title">Donut Chart</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<canvas id="pieChart" style="width: 100%; height: auto;"></canvas>
<div id="js-legend" class="chart-legend"></div>
</div><!-- /.box-body -->
</div><!-- /.box -->
<!-- jQuery 2.1.4 -->
<script src="../../plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- Bootstrap 3.3.5 -->
<script src="../../bootstrap/js/bootstrap.min.js"></script>
<!-- ChartJS 1.0.1 -->
<script src="../../plugins/chartjs/Chart.min.js"></script>
<!-- AdminLTE App -->
<script src="../../dist/js/app.min.js"></script>
<script>
$(function () {
/* ChartJS */
//-------------
//- PIE CHART -
//-------------
// Get context with jQuery - using jQuery's .get() method.
var pieChartCanvas = document.getElementById("pieChart").getContext("2d");
var pieChart = new Chart(pieChartCanvas);
var PieData = [
{
value: 700,
color: "#f56954",
highlight: "#f56954",
label: "Chrome",
labelColor : 'white',
labelFontSize : '16'
},
{
value: 500,
color: "#00a65a",
highlight: "#00a65a",
label: "IE",
labelColor : 'white',
labelFontSize : '16'
},
{
value: 400,
color: "#f39c12",
highlight: "#f39c12",
label: "FireFox",
labelColor : 'white',
labelFontSize : '16'
},
{
value: 600,
color: "#00c0ef",
highlight: "#00c0ef",
label: "Safari",
labelColor : 'white',
labelFontSize : '16'
},
{
value: 300,
color: "#3c8dbc",
highlight: "#3c8dbc",
label: "Opera",
labelColor : 'white',
labelFontSize : '16'
},
{
value: 100,
color: "#d2d6de",
highlight: "#d2d6de",
label: "Navigator",
labelColor : 'white',
labelFontSize : '16'
}
];
var pieOptions = {
segmentShowStroke: true,
segmentStrokeColor: "#fff",
segmentStrokeWidth: 2,
percentageInnerCutout: 50, // This is 0 for Pie charts
animationSteps: 100,
animationEasing: "easeOutBounce",
animateRotate: true,
animateScale: false,
responsive: true,
maintainAspectRatio: true,
legendTemplate : '<ul>'
+'<% for (var i=0; i<datasets.length; i++) { %>'
+'<li>'
+'<span style=\"background-color:<%=datasets[i].lineColor%>\"></span>'
+'<% if (datasets[i].label) { %><%= datasets[i].label %><% } %>'
+'</li>'
+'<% } %>'
+'</ul>'
};
//Create pie or douhnut chart
// You can switch between pie and douhnut using the method below.
pieChart.Doughnut(PieData, pieOptions);
document.getElementById("js-legend").innerHTML = pieChart.generateLegend();
});
</script>
</body>
</html>
最佳答案
2个主要问题
1-您没有使用参考实际图表来尝试生成图例pieChart.Doughnut(PieData, pieOptions);将创建您的图表，但您想将其分配给变量，以便您可以再次调用它来生成图例，例如：
var myChart = pieChart.Doughnut(PieData, pieOptions);
document.getElementById("js-legend").innerHTML = myChart.generateLegend();
2-您的模板引用了饼图图例中不可用的变量。您想引用
datasets而不是segments完整的模板看起来像；
legendTemplate: '<ul>' + '<% 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>'
};
这是使用您提供的数据的示例fiddle
$(function() {
/* ChartJS */
//-------------
//- PIE CHART -
//-------------
// Get context with jQuery - using jQuery's .get() method.
var pieChartCanvas = document.getElementById("pieChart").getContext("2d");
var pieChart = new Chart(pieChartCanvas);
var PieData = [{
value: 700,
color: "#f56954",
highlight: "#f56954",
label: "Chrome",
labelColor: 'white',
labelFontSize: '16'
}, {
value: 500,
color: "#00a65a",
highlight: "#00a65a",
label: "IE",
labelColor: 'white',
labelFontSize: '16'
}, {
value: 400,
color: "#f39c12",
highlight: "#f39c12",
label: "FireFox",
labelColor: 'white',
labelFontSize: '16'
}, {
value: 600,
color: "#00c0ef",
highlight: "#00c0ef",
label: "Safari",
labelColor: 'white',
labelFontSize: '16'
}, {
value: 300,
color: "#3c8dbc",
highlight: "#3c8dbc",
label: "Opera",
labelColor: 'white',
labelFontSize: '16'
}, {
value: 100,
color: "#d2d6de",
highlight: "#d2d6de",
label: "Navigator",
labelColor: 'white',
labelFontSize: '16'
}];
var pieOptions = {
segmentShowStroke: true,
segmentStrokeColor: "#fff",
segmentStrokeWidth: 2,
percentageInnerCutout: 50, // This is 0 for Pie charts
animationSteps: 100,
animationEasing: "easeOutBounce",
animateRotate: true,
animateScale: false,
responsive: true,
maintainAspectRatio: true,
legendTemplate: '<ul>' + '<% 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>'
};
//Create pie or douhnut chart
// You can switch between pie and douhnut using the method below.
var myChart = pieChart.Doughnut(PieData, pieOptions);
document.getElementById("js-legend").innerHTML = myChart.generateLegend();
});#js-legend ul {
list-style: none;
}
#js-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;
}
#js-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 box-danger">
<div class="box-header with-border">
<h3 class="box-title">Donut Chart</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<canvas id="pieChart" style="width: 100%; height: auto;"></canvas>
<div id="js-legend" class="chart-legend"></div>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->