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 ...
随机推荐
- js中解决函数中使用外部函数局部变量的问题(闭包问题)
如果要取得外部for循环中i的值则必须使用闭包才能解决 如果不使用闭包,直接使用 变量 i 的值是无效的,因为 i 已经在函数调用之前被回收了,所以你是调用不到它的!
- 微信公众平台可通过UnionID机制在多公众号间帐号互通
微信公众平台越来越注重开发者的反馈信息了,这不,微信开放平台提供了UnionID机制,通过获取用户基本信息接口,开发者可通过OpenID来获取用户基本信息,而如果开发者拥有多个公众号,可使用以下办法通 ...
- Python None comparison: should I use “is” or ==?
Use is when you want to check against an object's identity (e.g. checking to see if var is None). Us ...
- python 单步调试初探(未完待续)
pdb 调试: import pdb pdb.set_trace() pudb 调试: http://python.jobbole.com/82638/
- spring Quartz多个定时任务的配置
Quartz多个定时任务的配置 1,配置文件与spring整合,需要在spring 的总配置中一入或者在web.xml中spring监听中加上 ztc_cp-spring-quartz.xml 注:定 ...
- C# Async与Await的使用
这个是.NET 4.5的特性,所以要求最低.NET版本为4.5. 看很多朋友还是使用的Thread来使用异步多线程操作,基本上看不见有使用Async.Await进行异步编程的.各有所爱吧,其实都可以. ...
- 基于STM32和W5500的Modbus TCP通讯
在最近的一个项目中需要实现Modbus TCP通讯,而选用的硬件平台则是STM32F103和W5500,软件平台则选用IAR EWAR6.4来实现. 1.移植千的准备工作 为了实现Modbus TCP ...
- Centos7设置关闭防火墙
CentOS 7.0默认使用的是firewall作为防火墙,要想使用iptables必须重新设置一下. 1.关闭防火墙 [root@localhost ~]# systemctl stop firew ...
- React学习笔记-2-什么是jsx?如何使用jsx?
什么是jsx? JSX是JavaScript XML 这两个单词的缩写,xml和html非常类似,简单来说可以把它理解成使用各种各样的标签,大家可以自行 百度.所以jsx就是在javascri ...
- HTML登录注册界面怎么制作?
在没有学习CSS样式的前提下,是如何做一个简单的注册界面的. 一.表单标签(form) 首先我们先写一个<form></form>的标签,form标签属于表单标签,通常我们的登 ...