<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. 客户端技术的一点思考(数据存储用SQLite, XMPP通讯用Gloox, Web交互用LibCurl, 数据打包用Protocol Buffer, socket通讯用boost asio)

    今天看到CSDN上这么一篇< 彻底放弃没落的MFC,对新人的忠告!>, 作为一个一直在Windows上搞客户端开发的C++程序员,几年前也有过类似的隐忧(参见 落伍的感觉), 现在却有一些 ...

  2. Quora的技术探索

    关于问答类的应用,最早接触的是stackoverflow和知乎 ,而Quora作为知乎的原型,因为其创始人来自FaceBook而吸引了我.事实上关于Quora的技术分析,冯大辉和陈皓都已经有所详细的阐 ...

  3. WPF 特殊符号 字符绑定

    <Border xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x=" ...

  4. RPG Maker MV游戏解包

    该文章最新版本请前往:https://www.crowsong.xyz/127.html 前言 使用Petschko's RPG-Maker-MV File-Decrypter进行解包 使用Petsc ...

  5. linux log rotate

    今天老大提醒我产线kafka自身的log文件积累了好几个月了,我才发现原来kafka的log4j并删除old log. 第一反应是采用linux自带的logrotate功能,在/etc/logrota ...

  6. 地球坐标-火星坐标-百度坐标及之间的转换算法 C#

    美国GPS使用的是WGS84的坐标系统,以经纬度的形式来表示地球平面上的某一个位置.但在我国,出于国家安全考虑,国内所有导航电子地图必须使 用国家测绘局制定的加密坐标系统,即将一个真实的经纬度坐标加密 ...

  7. rest_framework

    一.解析器组件(parser) 1.编程:数据结构和算法的结合 2.restful规范 定义:url唯一定位资源,http请求方式区分用户行为 (1)接口设计规范 (2)返回数据规范 (3)错误消息规 ...

  8. SYN591-C型 时间间隔表

       SYN591-C型 时间间隔表 脉冲计数器数显计数器电机转速表使用说明视频链接: http://www.syn029.com/h-pd-250-0_310_44_-1.html 请将此链接复制到 ...

  9. vim 列编辑模式

    vim 列编辑模式 标签: vim 视窗模式 列编辑模式 vim 列编辑模式 例子:给列批量添加前缀.后缀.修改字段 vim 列编辑模式 vim 有三种编辑模式,命令模式.输入模式.视窗模式,我们常用 ...

  10. Spring Cloud Stream整合RabbitMQ

    简介 Spring Cloud Stream是一个构建消息驱动微服务的框架,应用程序通过input(相当于consumer).output(相当于producer)来与Spring Cloud Str ...