chart.js 里添加图表的清单:
var legend = myDoughnut.generateLegend(); $("#chart_legend").html(legend);
chart.js 里修改Doughnut的部分: 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>" <script src="~/Scripts/Chart.js"></script> <div class="pr"> <div class="chart_padd"> <canvas id="chart-area" width="300" height="300" /> </div> <div class="chart_word"> <strong>12,648.09</strong>总资产 </div> </div> <div id="chart_legend"> </div> <script> var doughnutData = [ { value: 300, color: "#007bb3", highlight: "#005d87", label: "可用金额", name: "可用金额" }, { value: 50, color: "#b2e1f7", highlight: "#90ceeb", label: "冻结金额", name: "可用金额" }, { value: 100, color: "#fc8e0c", highlight: "#d37609", label: "待收本金", name: "可用金额" }, { value: 40, color: "#7cbc27", highlight: "#66a314", label: "待收利息", name: "可用金额" }, { value: 120, color: "#f54141", highlight: "#d12626", label: "借款负债", name: "可用金额" } ]; window.onload = function () { var ctx = document.getElementById("chart-area").getContext("2d"); window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, { responsive: true }); var legend = myDoughnut.generateLegend(); $("#chart_legend").html(legend); }; </script>