• 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>
    

      

  • 相关阅读:
    061.Python前端Django组件用户认证组件
    060.Python组件-中间件
    059.Python前端Django组件cooki和session
    058.Python前端Django与Ajax
    057.Python前端Django模型ORM多表查询
    数字签名与数字证书的原理
    加密算法的分类与区别
    Linux操作php.ini文件
    Linux添加普通权限账号并授予root权限
    Linux 切换 shell
  • 原文地址:https://www.cnblogs.com/aimyfly/p/4745691.html
Copyright © 2020-2023  润新知