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>

  

chart.js 里添加图表的清单:的更多相关文章

  1. js里添加的标签

    js里添加的标签.网页加载此标签绑定的js函数时,由于没有标签,故无法执行函数. 例如: js中添加了一个button: html1 += "<td><button typ ...

  2. 【译】用 Chart.js 做漂亮的响应式表单

    数据包围着我们.虽然搜索引擎和其他应用都对基于文本方式表示的数据偏爱有加,但人们发现可视化是更容易理解的一种方式.今年初,SitePoint 发表了 Aurelio 的文章< Chart.js简 ...

  3. 使用chart和echarts制作图表

      前  言 chart.js是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库.它可以帮你用不同的方式让你的数据变得可视化.每种类型的图表都有动画效果,并且看上去非常棒,即便是在retina ...

  4. vue中使用chart.js

    1,安装chart.js和vue-chart.js npm install chart.js --save npm install vue-chart.js --save 2,独立文件,方便修改 封装 ...

  5. Chart.js docs

    原文链接:http://www.bootcss.com/p/chart.js/docs/ 引入Chart.js文件 首先我们需要在页面中引入Chart.js文件.此工具库在全局命名空间中定义了Char ...

  6. chart.js图表库案例赏析,饼图添加文字

    chart.js图表库案例赏析,饼图添加文字 Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上.目前,它支持6种图表类型(折线图,条形图, ...

  7. 让IE8支持HTML5及canvas功能!chart.js图表绘制工具库IE8上兼容方案

    第一步,我们加上对html5的支持. <!--[if IE]> <script src="/public/html5.js" type="text/ja ...

  8. Ionic中使用Chart.js进行图表展示以及在iOS/Android中的性能差异

    Angular Chart 简介 在之前的文章中介绍了使用 Ionic 开发跨平台(iOS & Android)应用中遇到的一些问题的解决方案. 在更新0.1.3版本的过程中遇到了需要使用图表 ...

  9. Rails-treasure chest4: 使用图表对资料进行分析chart.js(及其他);管理用户权限的gem 'Pumdit'(6000🌟)

    * 多档案上传* 图表资料分析  Chartkick gem或者 chart.js* 用户权限控管  gem Pundit (6000✨) *HTML E-mail 寄送 : gem premaile ...

随机推荐

  1. 清北学堂模拟赛day7 数字碰撞

    /* clj:水题别人都满分你不是你就完了,所以说水题一定要细心一点,有这么几个细节:①前导零的处理,全是零的时候要特判②换行要注意,不要多大一行,剩下就是水水的模拟了 */ #include< ...

  2. MySQL Where 条件

    WHERE 条件 有时候操作数据库时,只操作一些有条件限制的数据,这时可以在SQL语句中添加WHERE子句来规定数据操作的条件. 语法: SELECT column,… FROM tb_name WH ...

  3. 用JS做关灯游戏(初级)

    这是一个很有意思的游戏,可以试着玩下. <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  4. PHP array 操作函数

    array_map 函数的介绍 将数组的每个单元使用回调函数格式: array_map(callback, array) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ...

  5. 欢迎加入threejs

    Threejs is the coolest graphics rendering engine I have ever seen, so what is threejs, Now, we have ...

  6. IIS相关知识

    1.在web.config中,iis6使用<system.web>下配置项,iis7使用<system.webServer>下配置项 2.<httpHandlers> ...

  7. Windows10+Ubuntu双系统安装 (转)

    1.Windows10+Ubuntu双系统安装:   http://www.jianshu.com/p/2eebd6ad284d 2.UEFI启动模式安装ubuntu指南  :  http://col ...

  8. 【web前端学习部落22群】分享 碰撞的小球开源小案例

    对于课程中的疑问,大家可以加 web前端学习部落22群 120342833和其他老师还有众多的小伙伴们进行沟通交流哦,群里还有不少技术大拿.行业大牛 可以一起探讨问题,我们也会安排专业的技术老师为大家 ...

  9. Linux系统virtualbox + ubuntu + xshell 问题与注意事项

    序言:ubuntu闭源软件太多,一般不推荐使用:没钱可以使用centos.debian:有钱使用redhat 目前主流和常用的Linux版本主要有:1.Redhat 版本5.5和6.0最新:培训.学习 ...

  10. 【leetcode】Perfect Squares (#279)

    Given a positive integer n, find the least number of perfect square numbers (for example, 1, 4, 9, 1 ...