<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 学习使用的更多相关文章

  1. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. js学习之变量、作用域和内存问题

    js学习之变量.作用域和内存问题 标签(空格分隔): javascript 变量 1.基本类型和引用类型: 基本类型值:Undefined, Null, Boolean, Number, String ...

  3. 【Knockout.js 学习体验之旅】(3)模板绑定

    本文是[Knockout.js 学习体验之旅]系列文章的第3篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

  4. 【Knockout.js 学习体验之旅】(2)花式捆绑

    本文是[Knockout.js 学习体验之旅]系列文章的第2篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

  5. 【Knockout.js 学习体验之旅】(1)ko初体验

    前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...

  6. js学习篇1--数组

    javascript的数组可以包含各种类型的数据. 1. 数组的长度 ,直接用 length 属性; var arr=[1,2,3]; arr.length; js中,直接给数组的length赋值是会 ...

  7. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  8. NODE.JS学习的常见误区及四大名著

    NODE.JS学习的常见误区及四大名著 前段时间由于不满于社区里很多人对于NODE.JS的种种误解而写了一篇文章名为: NODE.JS之我见:http://www.cnblogs.com/pugang ...

  9. Node.js学习系列总索引

    Node.js学习系列也积累了一些了,建个总索引方便相互交流学习,后面会持续更新^_^! 尽量写些和实战相关的,不讲太多大道理... Node.js学习笔记系列总索引 Nodejs学习笔记(一)--- ...

随机推荐

  1. Android permission 动态申请、授权

    原文:Android permission 动态申请.授权 Android permission 新特性深度学习 本篇文章介绍android permission系统,并介绍android 6.0 p ...

  2. MeasureOverride 和 ArrangeOverride

    原文:MeasureOverride 和 ArrangeOverride FrameworkElement.MeasureOverride方法实现当在派生类中重写时,测量子元素在布局中所需的大小,然后 ...

  3. css3如何让div一直循环自转圈,附带:网络请求通知图片一直在转圈实例

    css3如何让div一直循环自转圈 代码如下: div{ -webkit-transition-property: -webkit-transform; -webkit-transition-dura ...

  4. 专门用于消息回调窗口的窗口标识HWND_MESSAGE(创建一个非可视、没有z-order的窗口)

    HWND_MESSAGE Message-Only Windows A message-only window enables you to send and receive messages. It ...

  5. AFN小结(简单的封装)

    AFN小结 1,AFN概念.原理 2,AFN的封装使用 3,AFN与其它框架对比 ————————————————————————————————— 1 , AFN的概念原理: AFN的基础是NSUR ...

  6. Mono.Cecil - 0.6

    原文:Mono.Cecil - 0.6 项目地址:Mono.Cecil 项目描述:In simple English, with Cecil, you can load existing manage ...

  7. Android零基础入门第5节:善用ADT Bundle,轻松邂逅女神

    原文:Android零基础入门第5节:善用ADT Bundle,轻松邂逅女神 在前几期中总结分享了Android的前世今生.Android 系统架构和应用组件那些事.带你一起来聊一聊Android开发 ...

  8. 处理 Windows Phone 应用中的“后退”按钮 (XAML)

    与电脑不同,所有 Windows Phone 设备都有“后退”按钮,它允许用户在应用的页面之间向后导航.如果用户在转到应用的第一页时再次按“后退”按钮,操作系统会挂起你的应用并将用户导航到应用启动前的 ...

  9. Android零基础入门第53节:拖动条SeekBar和星级评分条RatingBar

    原文:Android零基础入门第53节:拖动条SeekBar和星级评分条RatingBar 前面两期都在学习ProgressBar的使用,关于自定义ProgressBar的内容后期会继续学习的,本期先 ...

  10. Android零基础入门第75节:Activity状态和生命周期方法

    前面两期我们学习了Activity的创建和注册.以及启动和关闭,也学会了重写onCraete方法,这些知识在实际开发中远远不够,还需要学习了解更多. 生命周期就是一个对象从创建到销毁的过程,每一个对象 ...