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. wiggle-subsequence

    // 参考了:https://discuss.leetcode.com/topic/51893/two-solutions-one-is-dp-the-other-is-greedy-8-lines ...

  2. Lambda表达式 简介 语法 示例 匿名内部类

    在AS中使用 Lambda 表达式 Demo地址:https://github.com/baiqiantao/MultiTypeTest.git Gradle(Project级别)中添加classpa ...

  3. Configuring Time in Windows 7 and Win 200

    http://www.windowsnetworking.com/articles-tutorials/windows-7/Configuring-Time-Windows-7-Win-2008-R2 ...

  4. RS交叉表自动汇总后百分比列显示错误之解决方案

    可以说在从事Cognos开发的过程中,仅仅对数据展现而言,大多数用户使用最多的工具便是Report Studio了,此工具可以帮助我们快速的构建一些可供用户自主选择的数据报告.当然我个人认为没有什么开 ...

  5. elasticSearch nested exist与missing查询

    elasticSearch nested查询,简单意义上,你可以理解为,它不会被索引,只是被暂时隐藏起来,而查询的时候,开关就是使用nested query/filter去查询 下面我有一个例子,是查 ...

  6. [Backbone]3. More detail on View

    Change the AppointmentView to have a top-level li tag (instead of the default div tag). var Appointm ...

  7. python下载文件的三种方法

    Python开发中时长遇到要下载文件的情况,最常用的方法就是通过Http利用urllib或者urllib2模块. 当然你也可以利用ftplib从ftp站点下载文件.此外Python还提供了另外一种方法 ...

  8. 通过WebRTC实现实时视频通信（二）

    通过WebRTC实现实时视频通信(一) 通过WebRTC实现实时视频通信(二) 通过WebRTC实现实时视频通信(三) 在上一篇文章中,我们讲解了WebRTC的概述.历史.安全性和开发者工具.接下来我 ...

  9. wepy - 与原生有什么不同（app.js和app.wpy比较)

    app.js和app.wpy有什么不同呢? 答.app.wpy单文件包含了app.wxss\app.js\app.json\app.wxml app.js App({ /** * 当小程序初始化完成时 ...

  10. Java从零开始学二十八(Math类和Random类)

    一.Math概述 提供了常用的数学运算方法和两个静态常量E(自然对数的底数)和PI(圆周率) 二.常用方法 package com.pb.demo1; public class MathTest { ...