Char.Js 学习使用
<script src="../js/Chart.js"></script>
<div class="aui-col-xs-6" style="border:none;"><canvas id="first" width="" height="" style="float:left;"></canvas></div>
<script>
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: [, , , , , , ]
},
{
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
data: [, , , , , , ]
}
]
} function myChart() {
// $('#a_canvas').css('width', $(window).width()-30);
//window.addEventListener("load", function () { var options = ['现金', '红包', '碳值', '碳宝', '钻石', '铢']; // 获取上下文
var context = document.getElementById("first").getContext("2d");
var context1 = document.getElementById("seccend").getContext("2d");
var sthreed3 = document.getElementById("sthreed").getContext("2d");
//context.font = "20px Arial";
new Chart(context).Line(data, options);
}
myChart(); </script>
this.Line = function(data,options){
chart.Line.defaults = {
//网格线显示在数据的上方
scaleOverlay: false,
//硬编码重写y轴网格线
scaleOverride: false,
//y轴刻度的个数
scaleSteps: null,
//y轴每个刻度的宽度
scaleStepWidth: null,
//y轴的起始值
scaleStartValue: null,
//x轴和y轴的颜色
scaleLineColor: "rgba(0,0,0,0.1)",
//x轴和y轴的线的宽度
scaleLineWidth: ,
//是否显示y轴的标签
scaleShowLabels: true,
//标签显示值
scaleLabel: "<%=value%>",
//x轴和y轴标签的字体
scaleFontFamily: "'Arial'",
//标签字体的大小
scaleFontSize: ,
//标签字体的样式
scaleFontStyle: "normal",
//标签字体的颜色
scaleFontColor: "#666",
//是否显示网格线
scaleShowGridLines: true,
//网格线的颜色
scaleGridLineColor: "rgba(0,0,0,.08)",
//网格线的线宽
scaleGridLineWidth: ,
//是否是曲线
bezierCurve: true,
//是否显示点
pointDot: true,
//点的大小
pointDotRadius: ,
//点的边框的大小
pointDotStrokeWidth: ,
//是否显示数据集的笔画
datasetStroke: false,
//数据线的线宽度
datasetStrokeWidth: ,
//图标上的阴影部分
datasetFill: true,
//是否使用动画效果
animation: true,
//动画的步骤数(帧)
animationSteps: ,
//动画效果
animationEasing: "easeOutQuart",
//动画完成时的回调
onAnimationComplete: null
};
Char.Js 学习使用的更多相关文章
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- js学习之变量、作用域和内存问题
js学习之变量.作用域和内存问题 标签(空格分隔): javascript 变量 1.基本类型和引用类型: 基本类型值:Undefined, Null, Boolean, Number, String ...
- 【Knockout.js 学习体验之旅】(3)模板绑定
本文是[Knockout.js 学习体验之旅]系列文章的第3篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...
- 【Knockout.js 学习体验之旅】(2)花式捆绑
本文是[Knockout.js 学习体验之旅]系列文章的第2篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...
- 【Knockout.js 学习体验之旅】(1)ko初体验
前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...
- js学习篇1--数组
javascript的数组可以包含各种类型的数据. 1. 数组的长度 ,直接用 length 属性; var arr=[1,2,3]; arr.length; js中,直接给数组的length赋值是会 ...
- Vue.js学习笔记(2)vue-router
vue中vue-router的使用:
- NODE.JS学习的常见误区及四大名著
NODE.JS学习的常见误区及四大名著 前段时间由于不满于社区里很多人对于NODE.JS的种种误解而写了一篇文章名为: NODE.JS之我见:http://www.cnblogs.com/pugang ...
- Node.js学习系列总索引
Node.js学习系列也积累了一些了,建个总索引方便相互交流学习,后面会持续更新^_^! 尽量写些和实战相关的,不讲太多大道理... Node.js学习笔记系列总索引 Nodejs学习笔记(一)--- ...
随机推荐
- 关于WPF的ComboBox中Items太多而导致加载过慢的问题
原文:关于WPF的ComboBox中Items太多而导致加载过慢的问题 [WFP疑难]关于WPF的ComboBox中Items太多而导致加载过慢的问题 ...
- VS生成Cordova for Android应用之Gradle
原文:VS生成Cordova for Android应用之Gradle 一.Gradle简介 Gradle是一个基于Apache Ant和Apache Maven概念的项目自动化建构工具.它使用一种基 ...
- android L 关机流程图
下面是简单的流程图,从Java到kernel层. ShutdownThread.java文件 stop playing music,因为后面可能要playing shutdown music. 代码如 ...
- Win8 Metro(C#)数字图像处理--2.59 P分位法图像二值化
原文:Win8 Metro(C#)数字图像处理--2.59 P分位法图像二值化 [函数名称] P分位法图像二值化 [算法说明] 所谓P分位法图像分割,就是在知道图像中目标所占的比率Rat ...
- Linux杂谈: 树形显示多级目录--tree
最近写博客的时候偶尔会需要将文件目录结构直观地列出来,例如python的包结构. 于是在网上搜了搜,发现了一个Linux下还不错的工具--tree tree 可以很直观地显示多级目录结构. 1. 安装 ...
- Windows10 使用Virtual Box一启动虚拟机就蓝屏(错误代码SYSTEM_SERVICE_EXCEPTION)解决方案
原文:Windows10 使用Virtual Box一启动虚拟机就蓝屏(错误代码SYSTEM_SERVICE_EXCEPTION)解决方案 一打开虚拟机电脑就立马蓝屏重启,新建虚拟机也没用,然后就开始 ...
- VPS用来配置上网外,还可以做一个同步盘
我曾经在一个活动的博文里说过,男人必须要有一个VPS和一个树莓派,VPS这个东西,以后会是中国男人的一种必备技能,今天又有一个小伙伴请教我VPS的用法,我就简单说说我目前使用的情况.首先我希望你能有点 ...
- 小抄:选择 Unity 的对象生命周期管理员
Unity 框架提供了数种生命周期管理员,各有相同和相异之处.刚开始接触时,难免头昏. 制作这张小抄,只是为了要帮助自己理解和记忆.如果你也用 Untiy,或可参考看看. 文字說明: Transien ...
- Ruby元编程:单元测试框架如何找到测试用例
前几天看了Google Testing Blog上的一篇文章讲到C++因为没有反射机制,所以如何注册测试用例就成了一件需要各显神通的事情.从我的经验来看,无论是Google的GTest还是微软的LTM ...
- 使用 docker 搭建 nginx+php-fpm 环境 (两个独立镜像)
:first-child{margin-top:0!important}.markdown-body>:last-child{margin-bottom:0!important}.markdow ...