zoukankan      html  css  js  c++  java
  • 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>
    

      

  • 相关阅读:
    【BZOJ1002】【FJOI2007】轮状病毒(生成树计数)
    【BZOJ1003】【ZJOI2006】物流运输
    【BZOJ1001】狼抓兔子
    【对noip结束后一个月内的总结】
    floyd原理以及求最小环
    三角形面积求法
    6、task,线程和executor间的关系
    [leetcode]Valid Sudoku
    [leetcode]Search Insert Position
    rand5()产生rand7()
  • 原文地址:https://www.cnblogs.com/aimyfly/p/4745691.html
Copyright © 2011-2022 走看看