51呢最近在学习chart.js，然后呢就照着中文的帮助文档来然后就一直出Uncaught ReferenceError : require is not defined的问题查了挺多才知道是帮助文档跟chat.js不匹配的问题。

　　chart.js是分1.x和2.x版本的最新的版本是2.7.0，大家github下包的时候别下master分支包，下tags里的。然后引入的时候别引入src下的chart.js ，会报Uncaught ReferenceError : require is not defined 的错误。。，dist目录才是发布目录。。搞了半天，浪费时间。而且1.x和2.x的用法和options不一样，这里我主要调的2.x的版本。后面应用的主要是2.x版本的chart。

中文帮主文档呢，是1.11版本的下面是链接

http://www.bootcss.com/p/chart.js/docs/

对应的1.11的chart

https://github.com/chartjs/Chart.js/tags?after=v2.0.1

然后是2.x的帮助文档

http://www.chartjs.org/docs/latest/general/interactions/events.html

然后是chart的链接

https://github.com/chartjs/Chart.js/tags

2.x的链接打开后就是上面的样子箭头指的就是最新版本的chart，注意一定要是红框圈起来的，然后后面翻页能找到1.11版本的chart

又碰到两个问题,一个是图表适用retina屏的设置如下

  1. var myChart = echarts.init(document.getElementById('radar'),{
  2. devicePixelRatio: 5 //devicePixelRatio是指设备的像素比，简单来说就是设备物理像素和独立像素的比例，应该是比例越高图像越清晰
  3. });

不过这个设置用在PDF里还是不能高清显示，换了一种方式将图表转换成高分辨率的图片放到PDF里，问题解决了

  1. var img = new Image();
  2. img.src = myChart.getDataURL({
  3. 　　pixelRatio: 5,//图片像素比
  4. 　　backgroundColor: '#fff'
  5. });
  6. $("#radar").html("").prepend(img);
  7. $("#radar img").css({"width":"414px","height":"300px"});

具体用法如下

先是chart1.11的

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5.     <title>chart.js 1.x</title>
  6.      <style>
  7.  
  8.     </style>
  9.  
  10. </head>
  11. <script src="js/chart.1.11.js"></script>
  12. <body>
  13.  
  14. <!-- 展示canvas -->
  15. <div style="width:500px;height:500px;">
  16.     <canvas id="myChart"></canvas>
  17. </div>
  18. <script type="text/javascript">
  19.     var radarChartData = {
  20.         labels: ["PHP", "Java", "HTML", "JS", "JQuery","AngelaJS","voe"],
  21.         datasets: [
  22.             {
  23.                 label: "",
  24.                 fillColor: "rgba(0,55,0,0)",
  25.                 strokeColor: "rgba(66,0,0,0)",
  26.                 pointColor: "rgba(255,0,0,0)",
  27.                 pointStrokeColor: "rgba(0,0,0,0)",
  28.                 pointHighlightFill: "rgba(0,0,0,0)",
  29.                 pointHighlightStroke: "rgba(0,0,0,0)",
  30.                 data: [15,75,35,45,55,65,75]
  31.             }
  32.         ]
  33.     };
  34. var options = {  
  35.  
  36.     //Boolean - If we show the scale above the chart data
  37.     scaleOverlay : true,  
  38.  
  39.     //Boolean - If we want to override with a hard coded scale
  40.     scaleOverride : true,  
  41.  
  42.     //** Required if scaleOverride is true **
  43.     //Number - The number of steps in a hard coded scale
  44.     scaleSteps : 5,  
  45.  
  46.     //Number - The value jump in the hard coded scale
  47.     scaleStepWidth : 20,  
  48.  
  49.     // Y 轴的起始值
  50.     scaleStartValue : null,  
  51.  
  52.     // Y/X轴的颜色
  53.     scaleLineColor : "rgba(0,0,0,.1)",  
  54.  
  55.     // X,Y轴的宽度
  56.     scaleLineWidth : 1,  
  57.  
  58.     // 刻度是否显示标签, 即Y轴上是否显示文字
  59.     scaleShowLabels : true,  
  60.  
  61.     // Y轴上的刻度,即文字
  62.     scaleLabel : "<%=value%>",  
  63.  
  64.     // 字体
  65.     scaleFontFamily : "'Arial'",  
  66.  
  67.     // 文字大小
  68.     scaleFontSize : 12,  
  69.  
  70.     // 文字样式
  71.     scaleFontStyle : "normal",  
  72.  
  73.     // 文字颜色
  74.     scaleFontColor : "#666",      
  75.  
  76.     // 是否显示网格
  77.     scaleShowGridLines : false,  
  78.  
  79.     // 网格颜色
  80.     scaleGridLineColor : "rgba(0,0,0,.05)",  
  81.  
  82.     // 网格宽度
  83.     scaleGridLineWidth : 2,   
  84.  
  85.     // 是否使用贝塞尔曲线? 即:线条是否弯曲
  86.     bezierCurve : false,  
  87.  
  88.     // 是否显示点数
  89.     pointDot : true,  
  90.  
  91.     // 圆点的大小
  92.     pointDotRadius : 8,  
  93.  
  94.     // 圆点的笔触宽度, 即:圆点外层白色大小
  95.     pointDotStrokeWidth : 2,  
  96.  
  97.     // 数据集行程
  98.     datasetStroke : true,  
  99.  
  100.     // 线条的宽度, 即:数据集
  101.     datasetStrokeWidth : 2,  
  102.  
  103.     // 是否填充数据集
  104.     datasetFill : false,  
  105.  
  106.     // 是否执行动画
  107.     animation : true,  
  108.  
  109.     // 动画的时间
  110.     animationSteps : 60,  
  111.  
  112.     // 动画的特效
  113.     animationEasing : "easeOutQuart"
  114. }
  115. var myLine = new Chart(document.getElementById("myChart").getContext("2d")).Radar(radarChartData, options);
  116. </script>
  117. </body>
  118. </html>

然后是chart2.x的：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5.     <title>chart.js 2.x</title>
  6. </head>
  7. <body>
  8. <!-- 展示canvas -->
  9. <div style="width:500px;height:500px;" id="radar">
  10.     <canvas id="myChart"></canvas>
  11. </div>
  12. <!--引入 chartjs-->
  13. <script src="js/chart.js" type="text/javascript" charset="utf-8"></script>
  14. <script src="js/Chart.bundle.js" type="text/javascript" charset="utf-8"></script>
  15. <script type="text/javascript">
  16.     // 设置数据和参数
  17.     var radarChartData = {
  18.         labels: ["PHP", "Java", "HTML", "JS", "JQuery","AngelaJS","voe"],
  19.         datasets: [
  20.             {
  21.                 pointBorderColor:"#CF64A7",//描点颜色
  22.                 pointBackgroundColor:"#ff",//描点背景颜色
  23.                 borderColor:"#C06700",//画线颜色
  24.                 data: [95,25,35,45,55,65,75]
  25.             }
  26.         ]
  27.  
  28.     };
  29.     //设置选项
  30.     var options = {
  31.         legend:false,//数据项
  32.         scale: {
  33.             ticks: {
  34.                 beginAtZero: true,
  35.                 stepSize:20,//Y轴间隔
  36.                 max:100,//Y轴最大值
  37.                 min:0,
  38.                 callback:function(value) { return value + '%'; }//Y轴格式化
  39.             },
  40.             angleLines:{
  41.                 display:true//雷达辐射轴
  42.             },
  43.             pointLabels:{
  44.                 fontSize:13//x轴文字
  45.             },
  46.  
  47.         },
  48.         animation:{
  49.             onComplete:function(){
  50.                 document.getElementById("radar").innerHTML = "<img src='" + myBarChart.toBase64Image() + "' />";
  51.             }
  52.         }
  53.     }
  54.     var ctx = document.getElementById("myChart").getContext("2d");
  55.     var myBarChart = new Chart(ctx, {type: 'radar',data: radarChartData,options:options});
  56. </script>
  57. </body>
  58. </html>

上面的是雷达的图表，下面的是线型的

然后是圆形的

然后是柱状图

有前面的雷达作为例子后面的就好说了，把下面的类型改一改就可以

只要把圈起来的改为line或者polarArea或者scatter就能够出对应的图表。其实chart.js还是挺简单的。

主要还是要注意到chart.js是否与帮助文档匹配的问题。

简说chart2.4的应用，以及Uncaught ReferenceError : require is not defined的解决的更多相关文章

  1. Uncaught ReferenceError: XXX is not defined

    Uncaught ReferenceError: XXX is not defined 这个问题困扰我很久,虽然找到了解决方法,但是还不是很明白. 如下所示:是报错的代码. 如果把它改成下面的形式就可 ...

  2. Uncaught ReferenceError: WebForm_DoPostBackWithOptions is not defined

    环境:Asp.Net网站,Framework版本4.0,IIS版本7.0问题:按钮失效,下面是按钮代码: <a id="dnn_ctr1161_Login_Login_DNN_cmdL ...

  3. clipboard复制剪贴板功能，以及用requirejs时报错---Uncaught ReferenceError: Clipboard is not defined

    zeroclipboard是走的flash插件,手机浏览器是不支持的,所以不得不舍弃之,用clipboard,clipboard不需要flash就可以完成复制剪切等功能,而且可以兼容pc,移动端,下面 ...

  4. JS问题Uncaught ReferenceError:XXXX is not defined

    背景: html中一个table,table中进行分页.每行后面有一系列操作,如删除,修改.现在以删除为例说明问题. 实现方式: 使用button,在onclick中调用js函数,js函数中传递参数如 ...

  5. stickUp.js:98 Uncaught ReferenceError: vartop is not defined at HTMLDocument.<anonymous> (stickUp.js:98)

    附加var vartop = 0;在var topMargin = 0;这之后,这里是我附加的代码:$(document).ready(function(){ var contentButton = ...

  6. ext.net在使用水晶报表时页面无数据显示，并报错误Uncaught ReferenceError: bobj is not defined.

    一.错误描述 在公司做项目的时候,有时会需要用到水晶报表显示数据,水晶报表在ASP.NET中使用时没有问题,winform项目开发也没有问题,但是在ext.net开发使用时却报错了,错误:Uncaug ...

  7. Android JS桥交互（"Uncaught ReferenceError: xxx is not defined or xxx has no method"）

    网上android和js交互的代码有不少,也很容易搜到.最近在做的项目需要用到js桥,遇到了一些问题,记录下来,希望以后遇到能马上解决掉. 一开始我找的demo是从这个:http://blog.csd ...

  8. Uncaught ReferenceError: jQuery is not defined

    页面调试时,明明引入了JQ文件,却一直提示Uncaught ReferenceError: jQuery is not defined错误. 转自:http://blog.csdn.net/baicp ...

  9. Uncaught ReferenceError: layer is not defined

    错误详细信息,如下: Uncaught ReferenceError: layer is not defined' 关键词就是not defined 未定义,那么解决方案就是给它定义. 原来的问题代码 ...

随机推荐

  1. 【Alpha】——Sixth Scrum Meeting

    一.今日站立式会议照片 二.每个人的工作 成员 昨天已完成的工作 今天计划完成的工作 李永豪 对统计出现的问题进一步完善 学习将项目做成APK 郑靖涛 完善报表设计 协助设计账目一览表板块 杨海亮 测 ...

  2. Java学习3——java介绍

    Java程序运行过程: Java两种核心机制: Java虚拟机(Java Virtual Machine),提供程序运行的解释环境,使Java成为一种与平台无关的语言. Java虚拟机可以理解成一个以 ...

  3. 201521123085《Java程序设计》第4周学习总结

    1.本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 2.书面作业 Q1.注释的应用 使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看.(截图) Q2.面向对 ...

  4. 201521123057 《Java程序设计》第2周学习总结

    1. 本章学习总结 本周Java教学主要围绕Java的基本语法展开.在本周的学习中,我了解到了: -Integer的取值范围 -if...else条件式,switch条件式,while循环,break ...

  5. 泛型在Web中的作用

    当我们写网页的时候,常常会有多个DAO,我们要写每次都要写好几个DAO,这样会有点麻烦. 那么我们想要的效果是什么呢??只写一个抽象DAO,别的DAO只要继承该抽象DAO,就有对应的方法了. 要实现这 ...

  6. Hibernate中cascade属性的区别

    xml对于集合的级联操作属性cascade的取值可以是: none: 不级联操作,默认为none save-update:针对的是当对当前对象进行save或update操作时,要对想关联的对象进行sa ...

  7. 检测Linux硬盘IO数据

    首先安装sysstat(有些系统会预装): apt install sysstat 然后使用命令: iostat -x -k 2 x选项用于显示和io有关的扩展数据 k某些使用block为单位的字段改 ...

  8. Java简单实用方法一

    整理以前的笔记,在学习Java时候,经常会用到一些方法.虽然简单但是经常使用.因此做成笔记,方便以后查阅 这篇博文先说明构造和使用这些方法. 1,判断String类型数据是否为空 String类型的数 ...

  9. angular $compiler

    directive是如何被compiled HTML编译发生在三个阶段: 1.$compile遍历DOM节点匹配directives 如果compiler找到元素上的directive,directi ...

  10. angular 学习笔记

    每天进步一点点,学习笔记 笔记来自  angular权威指南 如果想要屏蔽浏览器对表单的默认验证行为,可以在表单元素上添加 novalidate 标记. 而按钮标签则完全忽略 hr e f 属性,并不 ...