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. 【HBase】学习笔记

    HBASE 1 简介 1.1 官网 1.1.1 http://hbase.apache.org/ 1.1.2 Apache HBase™ is the Hadoop database, a distr ...

  2. System.Net.Http.Formatting的nuget版本冲突问题

      已经添加了nuget Microsoft.AspNet.WebApi.Client 调用System.Net.Http.HttpClient.PostAsJsonAsync的时候报如下的错误: C ...

  3. dobbo 服务配置详解（解决超时重试问题）

    <!-- reference method -->     <dubbo:reference interface="com.xx.XxxService">  ...

  4. easyui form validate总是返回false原因

    最近做表单验证用了easyui form组件.又一次发现在测试表单都填写正确了但是调试表单的代码监测到调用form的"validate"方法总是返回false 最后查了一下原因在h ...

  5. Carrer Day有感

    2013年10月17日 一.永不放弃,痼疾必须自己克服,否则永远有阴影. 二.若长期无法取得进展,应该换一种方式. 大Boss确实有水平,答到点子上且照顾到听众面子,强.很多话掷地有声,发人深省,比如 ...

  6. 虎嗅： 小米盒子vs乐视盒子

    机顶盒并非新鲜概念,可一旦和互联网发生了跨界关系,就会产生奇妙的反应.自年初小米盒子和乐视盒子分别在突破重重阻碍成功发售之后,互联网企业进军硬件制造领域的趋势愈发明显.今天我们拿到了两家的盒子产品,从 ...

  7. PACS系统简易

    PACS系统 http://baike.baidu.com/link?url=prHBMbyu5W98ET1UGQ0PXXxLebxAeljckFH0pfO_2aODe1UgsrWgRd4Unbopt ...

  8. 栈的应用实例——平衡符号

    检查().[].{}是否配对. /* stack_balance_symbol */ #include "stack.h" #include <stdio.h> #in ...

  9. jquery ajax 跨域

    客户端“跨域访问”一直是一个头疼的问题,好在有jQuery帮忙,从jQuery-1.2以后跨域问题便迎刃而解.由于自己在项目中遇到跨域问题,借此机会对跨域问题来刨根问底,查阅了相关资料和自己的实践,算 ...

  10. 【剑指offer】二分查找二维数组

    1 2 3 4 5 6 7 8 9 3 3 1 2 3 4 5 6 7 8 9 10 3 3 12 2 3 4 5 6 7 8 9 10 例子输出: Yes No No 时间限制:1 秒 内存限制:3 ...