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>
chart.js 里添加图表的清单:的更多相关文章
- js里添加的标签
js里添加的标签.网页加载此标签绑定的js函数时,由于没有标签,故无法执行函数. 例如: js中添加了一个button: html1 += "<td><button typ ...
- 【译】用 Chart.js 做漂亮的响应式表单
数据包围着我们.虽然搜索引擎和其他应用都对基于文本方式表示的数据偏爱有加,但人们发现可视化是更容易理解的一种方式.今年初,SitePoint 发表了 Aurelio 的文章< Chart.js简 ...
- 使用chart和echarts制作图表
前 言 chart.js是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库.它可以帮你用不同的方式让你的数据变得可视化.每种类型的图表都有动画效果,并且看上去非常棒,即便是在retina ...
- vue中使用chart.js
1,安装chart.js和vue-chart.js npm install chart.js --save npm install vue-chart.js --save 2,独立文件,方便修改 封装 ...
- Chart.js docs
原文链接:http://www.bootcss.com/p/chart.js/docs/ 引入Chart.js文件 首先我们需要在页面中引入Chart.js文件.此工具库在全局命名空间中定义了Char ...
- chart.js图表库案例赏析,饼图添加文字
chart.js图表库案例赏析,饼图添加文字 Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上.目前,它支持6种图表类型(折线图,条形图, ...
- 让IE8支持HTML5及canvas功能!chart.js图表绘制工具库IE8上兼容方案
第一步,我们加上对html5的支持. <!--[if IE]> <script src="/public/html5.js" type="text/ja ...
- Ionic中使用Chart.js进行图表展示以及在iOS/Android中的性能差异
Angular Chart 简介 在之前的文章中介绍了使用 Ionic 开发跨平台(iOS & Android)应用中遇到的一些问题的解决方案. 在更新0.1.3版本的过程中遇到了需要使用图表 ...
- Rails-treasure chest4: 使用图表对资料进行分析chart.js(及其他);管理用户权限的gem 'Pumdit'(6000🌟)
* 多档案上传* 图表资料分析 Chartkick gem或者 chart.js* 用户权限控管 gem Pundit (6000✨) *HTML E-mail 寄送 : gem premaile ...
随机推荐
- 关于requirejs
24718-12042010 00001h6wzKLpfo3gmjJ8xoTPw5mQvY YA8vwka9tH!vibaUKS4FIDIkUfy!!f 3C"rQCIRbShpSlDcFT ...
- Asp.Net Core--基于声明的授权
翻译如下: 当创建身份时,其可以被分配由可信方发布的一个或多个声明. 索赔是名称值对,表示主题是什么,而不是主体可以做什么. 例如,您可能有驾驶执照,由当地驾驶执照颁发. 您的驾驶执照上有您的出生日期 ...
- setTimeout和setInterval的注意事项
精准问题 setTimeout的问题在于它并不是精准的,例如使用setTimeout设定一个任务在10ms后执行,但是在9ms后,有一个任务占用了5ms的cpu时间片,再次轮到定时器执行时,时间已经过 ...
- 四种常见的 POST 提交数据方式
HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS.GET.HEAD.POST.PUT.DELETE.TRACE.CONNECT 这几种.其中 POST 一般用来向服务端提交数据,本文 ...
- js计算地球两个经纬度之间的距离
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- apache自带的web监控器配置
第一:将mod_status模块放开,即去掉httpd.conf中的# 第二:在httpd.conf后面添加下面内容 <Location /server-status> SetHandle ...
- QT 默认环境路径配置方法
ubuntu 16.04 安装qt5.4之后还是默认使用系统自带的qt4.8,经查证需要在 在目录/usr/lib/x86_64-linux-gnu/qt-default/qtchooser里面的de ...
- xamarin.Android 标记1
群里一个朋友的博客 推荐一下 自己也做个书签记录. http://sunyt.me/2015/04/15/Xamarin-FAQ/
- winform listview控件、容器控件
ListVies控件主要用于展示数据 常用属性: FullRowSelect:设置是否行选择模式.(默认为false) (开启之后一下选中一行数据) GridLines:设置行和列之间是否显示网格线. ...
- DELL灵越15R5521安装黑苹果
按照网上的流程安装即可:(懒人法) 首先分出两个硬盘分区,一个10G左右(用于做系统),一个30G左右(用于装系统)://注意生成时选择不要格式化 然后利用硬盘助手将镜像文件(.cdr文件)写入10G ...