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. Java:字符串类简单的正则表达式

    class Test { public static void main(String[] args) { String str = "xia..as....yuan.com"; ...

  2. 同步FIFO的设计

    module scfifo #( , ) ( input clk, input rst_n, input wren, input rden, :] din, :] dout, output full, ...

  3. 第二十四章 springboot注入servlet

    问:有了springMVC,为什么还要用servlet?有了servlet3的注解,为什么还要使用ServletRegistrationBean注入的方式? 使用场景:在有些场景下,比如我们要使用hy ...

  4. 第十一章 springboot + mongodb（简单查询）

    1.mongodb在mac上的安装 下载mongodb,https://www.mongodb.org/ 解压缩到一个指定文件夹,如:/Users/enniu1/Desktop/zjg/mongodb ...

  5. RV 多样式 MultiType 聊天界面 消息类型 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  6. svn报错can only be performed on a version resource [at this time].

    报错 can only be performed on a version resource [at this time].   有的文件能提交,有的文件不能提交 猜想:是不是因为缓存问题方法:tea ...

  7. 对SingleTask和TaskAffinity的理解

    最近研究微信调起自己客户端的事情,对于SingleTask和TaskAffinity的理解又多了一些理解. 以前对于Android的四种LaunchMode有一些了解,其中比较有意思的就是Single ...

  8. [React GraphQL] Pass Parameters to urql's useQuery React Hook

    Showing how to use 'uqrl' library to do GraphQL in React. import React, {useState} from 'react' impo ...

  9. 关于block的回调使用-防止内存泄露问题

    block 一般用于回调,比方请求数据我们把asi封装好,仅仅用block调数据就方便很多 获取到得数据假设要给之加入数据,切记不能够使用self.(这个数组) 或者_(这个数组) addObject ...

  10. linux的子进程调用exec( )系列函数

    exec( )函数族 : 以下我们来看看一个进程怎样来启动还有一个程序的运行.在Linux中要使用exec函数族.系统调用execve()对当前进程进行替换,替换者为一个指定的程序,其參数包含文件名称 ...