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学习笔记(一)--- ...
随机推荐
- 修改window.external使JS可调用Delphi方法
原文地址:http://hi.baidu.com/rarnu/blog/item/4ec80608022766d663d986ea.html 在js中,有一个比较特殊的对象,即window.exter ...
- wpf 换行符
方法1: <TextBlock Text="第一行 第二行"/>文字中间加上: 就可以了.这个方法很有用,也可以用在ToolTip上:<ToolTip Width ...
- __declspec的15种用法
__cdecl和__stdcall都是函数调用规范(还有一个__fastcall),规定了参数出入栈的顺序和方法,如果只用VC编程的话可以不用关心,但是要在C++和Pascal等其他语言通信的时候就要 ...
- 【Git】打标签
打标签 同大多数 VCS 一样,Git 也可以对某一时间点上的版本打上标签.人们在发布某个软件版本(比如 v1.0 等等)的时候,经常这么做.本节我们一起来学习如何列出所有可用的标签,如何新建标签,以 ...
- 用JavaScriptSerializer解析JSON
引用System.Web.Extensions using System.Web.Script.Serialization; var serializer = new JavaScriptSerial ...
- Android零基础入门第61节:滚动视图ScrollView
原文:Android零基础入门第61节:滚动视图ScrollView 前面几期学习了ProgressBar系列组件.ViewAnimator系列组件.Picker系列组件和时间日期系列组件,接下来几期 ...
- Windows Azure之Mobile Service
我建个android app和Windows Azure的Mobile Service配合,以实现会员注册的功能,实际十分简单,微软家的东西真心好用 首先新建个Mobile Service New-& ...
- Win32 Application基本框架
//程序入口 intAPIENTRY WinMain(HINSTANCE hInstance, HINSTANCE hPrevInstance, LPSTR lpCmdLine, int nCmdSh ...
- linux下编译qt5.6.0静态库(使用./configure --help来看看都有哪些参数。超详细,有每一个模块的说明。如果改变了安装的目录,需要到安装目录下的bin目录下创建文件qt.conf)(乌合之众)good
linux下编译qt5.6.0静态库 linux下编译qt5.6.0静态库 configure生成makefile 安装选项 Configure选项 第三方库: 附加选项: QNX/Blackberr ...
- linux下mysql定时备份
1. 在服务器上建立备份文件的存放文件夹 sudo mkdir /usr/local/dbbackup 2. 编写备份脚本 vi dbbackup.sh 在里面编写如下内容 mysqldump -ur ...