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

  1. js学习笔记：webpack基础入门（一）

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

  2. Vue.js学习笔记（2）vue-router

    vue中vue-router的使用:

  3. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

  4. WebGL three.js学习笔记 使用粒子系统模拟时空隧道（虫洞）

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

  5. WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法

    WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...

  6. WebGL three.js学习笔记 创建three.js代码的基本框架

    WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...

  7. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  8. 2019-4-29 js学习笔记

    js学习笔记一:js数据类型   1:基本数据类型       number类型(整数,小数)      String类型          boolean类型        NaN类型其实是一个nu ...

  9. 一点感悟：《Node.js学习笔记》star数突破1000+

    写作背景 笔者前年开始撰写的<Node.js学习笔记> github star 数突破了1000,算是个里程碑吧. 从第一次提交(2016.11.03)到现在,1年半过去了.突然有些感慨, ...

随机推荐

  1. 血淋淋的事实告诉你：你为什么不应该在JS文件中保存敏感信息

    在JavaScript文件中存储敏感数据,不仅是一种错误的实践方式,而且还是一种非常危险的行为,长期以来大家都知道这一点. 而原因也非常简单,我们可以假设你为你的用户动态生成了一个包含API密钥的Ja ...

  2. 第二章 Javac编译原理

    注:本文主要记录自<深入分析java web技术内幕>"第四章 javac编译原理" 1.javac作用 将*.java源代码文件转化为*.class文件 2.编译流程 ...

  3. python 数据处理中的 LabelEncoder 和 OneHotEncoder

    One-Hot 编码即独热编码,又称一位有效编码,其方法是使用N位状态寄存器来对N个状态进行编码,每个状态都由他独立的寄存器位,并且在任意时候,其中只有一位有效.这样做的好处主要有:1. 解决了分类器 ...

  4. java 判断字符串是否相等 (转)

    http://blog.csdn.net/chtnj/article/details/7909720 判断字符串相等我们经常习惯性的写上if(str1==str2),这种写法在java中可能会带来问题 ...

  5. 微信小程序app配置指南

    //app.json页面 { //页面注册,有几个页面都要在pages里面注册 "pages":[ "pages/index/index", "pag ...

  6. 【statistics】理想论坛2018-4-25日统计

    说明:利用理想论坛爬虫1.07版(http://www.cnblogs.com/xiandedanteng/p/8954115.html) 下载了前十页主贴及子贴,共得到359619条数据,以此数据为 ...

  7. Andriod中的依赖注入

    Web后端开发者应该对依赖注入都比较熟悉,至于Android又是如何进行依赖注入的呢?在这篇文章中,让我们一起通过一个例子了解一下在Android中进行依赖注入的好处. AndroidAnnotati ...

  8. 翻译记忆软件-塔多思TRADO经典教程_2

    Trados 中文简明教程Trados 中文简明教程1. 准备工作 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ...

  9. sqlite可视化工具推荐

    软件名称:SQLite Expert 下载地址:http://www.sqliteexpert.com/download.html 下载免费的Personal版本就可以了 我试用了SQLite Exp ...

  10. eclipse在search的时候，通过search打开的页面会覆盖之前打开的页面

    eclipse在search的时候,通过search打开的页面会覆盖之前打开的页面,如果不想覆盖的话,可以这么设置: Window->Preferences->General->Se ...