chart.js 里添加图表的清单:
2015-08-20 16:47
645 查看
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>
相关文章推荐
- JS 事件对象和事件冒泡
- js中(function(){…})()立即执行函数写法理解
- JS实现的通用表单验证插件完整实例
- formvalidator 表单验证插件
- javascript 事件 第23节
- javascript 闭包暴露句柄和命名冲突的解决方案
- MVC Newtonsoft.Json解析JSON字符串
- 极光 通过js函数
- JavaScript(二)-16-(JS自定义对象2)
- js中,从一段链接中获取ip地址的方法。
- 初识JSONP--解决ajax跨域问题
- JavaScript(二)-15-(JS自定义对象)
- JavaScript(二)-14-(JS中的特有语句-forin)
- JS中的数据类型和变量内存
- JavaScript(二)-13-(全局方法&Number对象)
- JavaScript(二)-11-(JS中特有语句-with)
- JavaScript(二)-12-(常见对象-Math-基本功能)
- JavaScript(二)-10-(常见对象-Date-基本方法)
- js很好的教材
- Javascript(二)-09-(常见对象-Array-练习-自定义功能)