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

使用chart.js创建并自定义Doughnut图表

最新推荐文章于 2022-09-16 16:54:30 发布

转载最新推荐文章于 2022-09-16 16:54:30 发布 · 79 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/aimyfly/p/4745691.html

本文详细介绍了如何使用chart.js库创建Doughnut图表，并通过自定义样式来展示资产的不同组成部分，包括可用金额、冻结金额、待收本金、待收利息和借款负债。展示了从数据准备到生成图表的完整过程，以及如何生成图表的图例。

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