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 ...
随机推荐
- 【总结1】PhpStorm配置XDebug(远程)调试PHP
配置PhpStorm调试PHP 第一步:配置 XDebug 下载安装XDebug到本地环境,打开php.ini,参考配置如下: [XDebug] zend_extension = "D:\P ...
- sql中case when语句的使用-来自网摘文章
Case具有两种格式.简单Case函数和Case搜索函数. --简单Case函数 CASE sex WHEN '1' THEN '男' WHEN '2' THEN '女' ELSE '其他' END ...
- 第3月第13天 cpp模版 Iterator模式 proactor
1.模版除了传参,还可以自动创建.而传指针只是传参而已. template <class TYPE, class FUNCTOR, class ACE_LOCK, typename TIME_P ...
- javascript数据结构-优先队列
这里之所以扩充一个 有限队列 是因为,生活使用中队列通常会附加优先级,比如排队买票,一般老人和军人等会有优先权限. 实现:继承上篇的 普通队列实现.这里用一种方法,入队的时候,进行排序插入到指定位置, ...
- postgresql 中replace 函数
select replace(字段名,E'\r','') from 表名 where 字段名 like E'%\r%';: 查看修改后结果,并不真实修改数据库 update 表名 set 字段名=r ...
- IEnumerable和IQueryable和Linq的查询
IEnumerable和IEnumerable 1.IEnumerable查询必须在本地执行.并且执行查询前我们必须把所有的数据加载到本地.而且更多的时候.加载的数据有大量的数据是我们不需要的无效数据 ...
- 关于XSS(跨站脚本攻击)和CSRF(跨站请求伪造)
我们常说的网络安全其实应该包括以下三方面的安全: 1.机密性,比如用户的隐私被窃取,帐号被盗,常见的方式是木马. 2.完整性,比如数据的完整,举个例子,康熙传位十四子,被当时四阿哥篡改遗诏:传位于四子 ...
- Java控件(日常笔记)
Java的一些控件 text:文本区域 readonly属性:是否只读.password:密码区域,输入的文本以'*'展示checkbox:复选框 checked属性:是否选中:radio:单选框: ...
- 【转载】PyQt QSetting保存设置
转载地址: http://blog.sina.com.cn/s/blog_4b5039210100h3zb.html 用户对应用程序经常有这样的要求:要求它能记住它的settings,比如窗口大小,位 ...
- [LeetCode] Best Time to Buy and Sell Stock
Say you have an array for which the ith element is the price of a given stock on day i. If you were ...