Chart.js 学习笔记
1、引入Chart.js 文件
<script src="Chart.js"></script>
2、在html中创建画布
<canvas id="myChart" width="400" height="400"></canvas>
3、在js中实例化图表
var ctx = $("#myChart").get(0).getContext("2d");
var myNewChart = new Chart(ctx);
不同图表需要new出不同的Chart。
以下是雷达图的实例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图表插件</title>
<link href="css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="js/Chart.bundle.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script>
<style>
.top-offset{
margin: 5px 0;
}
</style>
</head>
<body>
<div class="container">
<div class="row top-offset">
<div>
<canvas id="canvas"></canvas>
</div>
</div>
<div class="row">
<div>
<button id="randomizeData">随机数据</button>
<button id="addDataset">添加数据</button>
<button id="removeDataset">移除数据</button>
<button id="addData">添加科目</button>
<button id="removeData">移除科目</button>
</div>
</div>
</div>
<script>
var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
};
var randomColorFactor = function() {
return Math.round(Math.random() * 255);
};
var randomColor = function(opacity) {
return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',' + (opacity || '.3') + ')';
}; var config = {
type: 'radar',
data: {
labels: ["语文", "数学", "英语", "理综", "基本能力", "体育"],
datasets: [{
label: "一本分数线",
backgroundColor: "rgba(1, 191, 157,0.2)",
pointBackgroundColor: "rgba(31, 207, 109,1)",
data: [122, 125, 118,210,92,95]
},{
label: "二本分数线",
hidden: true,
backgroundColor: "rgba(220,220,220,0.2)",
pointBackgroundColor: "rgba(220,220,220,1)",
data: [115, 110, 105,180,85,86]
}, {
label: '三本分数线',
hidden: true,
data: [90, 85, 98,130,80,82],
}, {
label: "我的成绩",
backgroundColor: "rgba(243,112,33,0.2)",
pointBackgroundColor: "rgba(255,62,62,1)",
hoverPointBackgroundColor: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [122, 120, 128,190,90,92]
},]
},
options: {
legend: {
position: 'top',
},
title: {
display: true,
text: '高考成绩雷达图'
},
scale: {
reverse: false,
gridLines: {
color: ['black', 'red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']
},
ticks: {
beginAtZero: true
}
}
}
};
// 实例化雷达图
$(function () {
window.myRadar = new Chart($("#canvas"), config);
}) // 随机数据
$('#randomizeData').click(function() {
$.each(config.data.datasets, function(i, dataset) {
dataset.data = dataset.data.map(function() {
return randomScalingFactor();
}); }); window.myRadar.update();
});
// 添加学生数据
$('#addDataset').click(function() {
var newDataset = {
label: '学生 ' + config.data.datasets.length + " 成绩",
borderColor: randomColor(0.4),
backgroundColor: randomColor(0.5),
pointBorderColor: randomColor(0.7),
pointBackgroundColor: randomColor(0.5),
pointBorderWidth: 1,
data: [],
}; for (var index = 0; index < config.data.labels.length; ++index) {
newDataset.data.push(randomScalingFactor());
} config.data.datasets.push(newDataset);
window.myRadar.update();
});
// 添加课程
$('#addData').click(function() {
if (config.data.datasets.length > 0) {
config.data.labels.push('科目 #' + config.data.labels.length); $.each(config.data.datasets, function (i, dataset) {
dataset.data.push(randomScalingFactor());
}); window.myRadar.update();
}
});
// 移除学生数据
$('#removeDataset').click(function() {
// 删除 splice(数据位置,数据个数)
// config.data.datasets.splice(0, 1);
// pop() 最后一个元素出栈,删除并返回最后一个元素
config.data.datasets.pop();
window.myRadar.update();
});
// 移除课程数据
$('#removeData').click(function() {
config.data.labels.pop(); // remove the label first $.each(config.data.datasets, function(i, dataset) {
dataset.data.pop();
}); window.myRadar.update();
}); </script>
</body> </html>
Chart.js 学习笔记的更多相关文章
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- Vue.js学习笔记(2)vue-router
vue中vue-router的使用:
- JS 学习笔记--9---变量-作用域-内存相关
JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...
- WebGL three.js学习笔记 使用粒子系统模拟时空隧道(虫洞)
WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...
- WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法
WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...
- WebGL three.js学习笔记 创建three.js代码的基本框架
WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- 2019-4-29 js学习笔记
js学习笔记一:js数据类型 1:基本数据类型 number类型(整数,小数) String类型 boolean类型 NaN类型其实是一个nu ...
- 一点感悟:《Node.js学习笔记》star数突破1000+
写作背景 笔者前年开始撰写的<Node.js学习笔记> github star 数突破了1000,算是个里程碑吧. 从第一次提交(2016.11.03)到现在,1年半过去了.突然有些感慨, ...
随机推荐
- 【PAT Advanced Level】1011. World Cup Betting (20)
简单模拟题,遍历一遍即可.考察输入输出. #include <iostream> #include <string> #include <stdio.h> #inc ...
- 基于Qt的wifi智能小车的制作(一)
基于Qt的wifi智能小车的制作(一) 好久不写博客了,真的是有点惭愧了.翻开上一次的博客,到现在已经2个多月了,只能说是自己太懒惰了!忙是另一回事!趁今天晚上有点时间回顾下这一段时间的收获以及做的 ...
- 使用WPF来创建 Metro UI
当我第一次运行Zune时,我为这些美丽的UI所折服.当时就说这肯定不是用WPF做的,因为这些字体是如此的清晰而且UI反映的也非常快速..而且我从维基百科上也了解到Zune的第一个版本是2006年发布的 ...
- 有关于腾讯地图服务端IP定位接口的获取当前城市的处理
接口说明:http://apis.map.qq.com/ws/location/v1/ip 说明里面写了ip可以缺省,然并卵,经过测试的到结果并不能获取到当前城市,理由是腾讯ip库的对应ip精度没有定 ...
- sass与less
刚刚发现sass这个东西,前端真热闹,下面比较一下这两者的共同点与区别. 开头总结一下,方便记忆:sass依赖后端计算能力,less依赖客户端的计算能力. 很多开发者不选择LESS是因为LESS输出修 ...
- 单页WEB应用(三),Chat聊天模块
Chat 聊天模块 这个模块应该就是该书全篇的唯一一个模块吧,后面差点儿全部的篇章都环绕这个模块去实现的,只是就通过这一个模块的实现和上线,也能体现单页应用开发到公布上线的整个过程,毕竟后面的数据.通 ...
- HDU 2544最短路dijkstra模板题
最短路 Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submis ...
- 微信小程序 - 获取所在位置(省、市、区)
实现步骤 1. 获取当前经纬度 2. 调用腾讯(百度.高德)地图对应的请求地址,一般都会有独一的key, 譬如 腾讯地图调用地址: https://apis.map.qq.com/ws/geocode ...
- Struts2(四)Action一接收参数
一.属性接收参数并输出 导入struts2的包,导入需要的包 和struts.xml配置文件 <?xml version="1.0" encoding="UTF-8 ...
- Hibernate(十)HQL查询二
一.数据库的emp名和dept表 建立持久化类和配置文件,可以用MyEclipse直接生成 持久化类 package entity; import java.util.Date; public cla ...