chartjs执行图表
<html> <head> <title></title> </head> <body> <div style='width:50%'> <canvas id="canvas" width="400" height="400"></canvas> </div> <script type="text/javascript" src='Chart.js'></script> <script type="text/javascript"> //Get the context of the canvas element we want to select window.onload = function() { var ctx = document.getElementById("canvas").getContext("2d"); ctx.fillRect(10, 10, 20, 20); window.myLine = new Chart(ctx).Line(lineChartData, { responsive: true }); }; //执行随机异步交互 var randomScalingFactor = function(){ return Math.round(Math.random()*100)}; var lineChartData = { labels : ["January","February","March","April","May","June","July"], datasets : [ { label: "My First dataset", fillColor : "rgba(220,220,220,0.2)", strokeColor : "rgba(220,220,220,1)", pointColor : "rgba(220,220,220,1)", pointStrokeColor : "#fff", pointHighlightFill : "#fff", pointHighlightStroke : "rgba(220,220,220,1)", data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()] }, { label: "My Second dataset", fillColor : "rgba(151,187,205,0.2)", strokeColor : "rgba(151,187,205,1)", pointColor : "rgba(151,187,205,1)", pointStrokeColor : "#fff", pointHighlightFill : "#fff", pointHighlightStroke : "rgba(151,187,205,1)", data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()] } ] } </script> </body> </html>
chartjs执行图表的更多相关文章
- ECharts学习总结(三):ECharts图表对象的初始化(init)详解以及注意事项
一.相关js文件的引入 这里我们采用标签式引入文件的方式,我们引入两个js文件,一个是esl.js文件和一个echarts.js. <script src="js/esl.js&quo ...
- 基于Vue.js的大型报告页项目实现过程及问题总结(二)
距离上一篇文章过去了二十多天了,期间一直想把第二部分写完,结果在测试过程中遇到了各种坑爹的问题,到今天才算基本完成,也许还有后续,但趁着今天有时间就写出来吧,也算对这个项目的一个总结了 遇到最大问题: ...
- Bash 翻译
Bash参考手册 目录 1简介 1.1什么是Bash? 1.2什么是shell? 2定义 3基本外壳功能 3.1 Shell语法 3.1.1外壳操作 3.1.2报价 3.1.2.1逃逸角色 3.1.2 ...
- Tensorflow平台快速搭建:Windows 7+TensorFlow 0.12.0
Tensorflow平台快速搭建:Windows 7+TensorFlow 0.12.0 1.TensorFlow 0.12.0下载 2016年11月29日,距离TensorFlow 宣布开源刚刚过去 ...
- 带有Apache Spark的Lambda架构
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 目标 市场上的许多玩家已经建立了成功的MapReduce工作流程来每天处理以TB计的历史数据.但是谁愿意等待24小时才能获得最新的分析结果? ...
- 关于Echarts的使用和遇到的问题
对于插件工具,感觉按着官方的教程,便可以使用,但是看这个Echarts有点晕乎乎的,还是不能快速的学习啊. 一.在webpack中使用ECharts //通过 npm 获取 echartsnpm in ...
- 图表控件的学习===》hightChart 和 Chartjs的使用
hightChart : 比较旧的图表控件 商业需要授权 Chartjs 免费开源 刚开始使用了下 hightchart 然后参考示例 建了对应的参数配置的类, 也顺利的集合到后台动态传输. 后 ...
- js 图表插件 chartjs 2.4
PS:该图表插件对手机端支持挺好 网上的文章大多数的参数都是老版本的过时的,最新api查看官网http://www.chartjs.org/docs/ 下载地址 https://github.com ...
- laravel-admin 添加图表 Chartjs
github地址:https://github.com/laravel-admin-extensions/chartjs Installation composer require laravel-a ...
随机推荐
- uva1588kickdown
题目要求简述:给定长度分别为n1,n2(n1,n2<=100)且每列的高度只为1或者2的长条.需要将他们放入一个高度为3的容器,问能够容纳它们的最短容器长度. 思路就是固定一个字符串a,字符串b ...
- jQuery 学习笔记(函数调用机制)
最近在学前端框架amazeui,之前用其中的CSS样式搭建了一个伪360网页,学会了点布局的东西,但是始终觉得有点无聊.所以这几天就开始研究jquery代码了. 对于我这样一个初学者来说,有很多东西都 ...
- [QDB] 幽灵分享:QDataSet+TQMSSQLConverter 实战技巧
转载自QDAC官网网站,文章发现问题可能随时更新,最新版本请访问:http://blog.qdac.cc/?p=3066 [注]本文由网友 幽灵 分享,由 swish 整理并重新编辑.1.将A数据库A ...
- iOS原型模式
原型模式:大部分重复,只有一小部分不同的情况下,为了代码清晰和避免麻烦,用原型模式,会更方便一点 // 学生1 StudentModel *stu1 = [[StudentModel alloc] i ...
- java利用Aspose.slides.jar将本地ppt文档转化成pdf(完美破解版 无水印 无中文乱码)
下载aspose.slides-15.9.0.jar包 http://pan.baidu.com/s/1jH3ZNbK JAVA代码 package webViewer; import java.io ...
- shell 脚本杀死后台由php脚本控制运行的所有php脚本和java程序
效果: 运行命令: ./killallphpjavarm.sh java 源码: #!/bin/sh#根据进程名杀死进程#FileName: killjavaphprm.sh pgrep php ki ...
- php sleep()的实时输出打印,清除ob缓冲区
@ini_set('implicit_flush',1);ob_implicit_flush(1);@ob_end_clean(); echo 1;//echo str_repeat('', 1024 ...
- 使用JSONObject遇到的问题,java.lang.NoClassDefFoundError: net/sf/json/JSONObject
先是报 java.lang.NoClassDefFoundError: net/sf/json/JSONObject 这个错误, 打开项目属性找到java build path中的libaries,找 ...
- 永久解决火狐浏览器出现的flash版本更新问题
最近使用的火狐浏览器又出问题了,老是出现flash版本太旧,以至于在火狐的版本出现“该版本存在安全隐患,应当更新”的字样.对于火狐浏览器,我很早就开始使用了,flash版本更新的问题,我也有我的一些小 ...
- Java基础之OOP
1. 类(类型)于对象 (1)面向过程的开发于面向对象开发的区别: 面向过程更重视流程化以及功能的开发,简单点来讲,就是按照固定的模式一步步按部就班的进行,最终达成一个功能的实现.这种模式叫做面向过程 ...