chart.js 里添加图表的清单:

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>

  

原文地址:https://www.cnblogs.com/aimyfly/p/4745691.html