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. insert-delete-getrandom-o1

    // 参考了下面一些讨论的解法 // https://discuss.leetcode.com/topic/53235/java-with-hashtable-arraylist/2 class Ra ...

  2. 【Gson】简介 文档 基本使用 示例

    简介 new TypeToken<List<Person>>() {}.getType() 1 1   1 new TypeToken<List<Person> ...

  3. word 文档如何加密

    给Word文档加密主要有以下几个方法:文件加密文件菜单设置:1.打开需要加密的Word文档.2.选“文件”的“另存为”,出现“另存为”对话框,在“工具”中选“常规选项”,出现“保存”选项卡.3.分别在 ...

  4. ElasticSearch+Kinaba 在Windows下的安装

    转自:https://blog.csdn.net/qq_28795681/article/details/79723455 1.下载安装java 2.下载ElasticSearch和Kinaba,并解 ...

  5. 内容匹配广告投放技术4：网盟CTR预估（百度文库课程）

    原文:http://wbj0110.iteye.com/blog/2043065 该文是百度文库课程<计算广告学之内容匹配广告&展示广告原理.技术和实践>的课程笔记,感谢百度! 课 ...

  6. Could not find com.android.tools.build:gradle:3.0.0-alpha1 in circle ci

      Error:(1, 0) The android gradle plugin version 3.0.0-alpha1 is too old, please update to the lates ...

  7. STL - 容器 - Forward List

    forward list是一个行为受限的list, 不能走回头路. 它只提供前向迭代器, 而不提供双向迭代器. eg: rbegin(), rend(), crbegin(), crend()这些都不 ...

  8. NSURLSession 学习笔记

    NSURLSession 学习笔记 一:NSURLSession 类似之前的NSURLConnection, 可配置每个session的 cookie,证书等网络连接配置信息 NSURLSession ...

  9. spring boot 1.5.2 操作mongodb3.4.0

    1:build.gradle 添加mongodb依赖 dependencies { compile('org.springframework.boot:spring-boot-starter-web' ...

  10. 导入maven项目出现 Unsupported IClasspathEntry kind=4

    Unsupported IClasspathEntry kind=4 这个异常会导致项目无法使用spring ide启动 来自:http://blog.csdn.net/kongqz/article/ ...