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>
    

      

  • 相关阅读:
    防采集策略『blueidea』
    关于进程和线程『整理』
    数据采集『blueidea』
    搜索引擎营销的一些策略『来源:点石互动搜索引擎优化博』
    AJAX之通讯技术简介
    使用AJAX技术构建更优秀的Web应用程序
    AJAX相关JS代码片段和浏览器模型『』
    RDLC报表:每页显示N条记录
    ObjectMapper .NET
    How to Hash Data with Salt
  • 原文地址:https://www.cnblogs.com/aimyfly/p/4745691.html
Copyright © 2011-2022 走看看