1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5. </head>
  6. <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
  7. <script src="Chart.js-master/Chart.min.js"></script>
  8. <body>
  9. <div class="canvasWrapper">
  10. <canvas id="myChart" width="600" height="400"></canvas>
  11. </div>
  12. </body>
  13. <script>
  14.         var data = {
  15.             labels : ["January","February","March","April","May","June","July","444"],
  16.             datasets : [
  17.                 {
  18.                     fillColor : "rgba(220,220,220,0.5)",
  19.                     strokeColor : "rgba(220,220,220,1)",
  20.                     pointColor : "rgba(220,220,220,1)",
  21.                     pointStrokeColor : "#fff",
  22.                     data : [65,59,90,81,56,55,40,99]
  23.                 },
  24.                 {
  25.                     fillColor : "rgba(151,187,205,0.5)",
  26.                     strokeColor : "rgba(151,187,205,1)",
  27.                     pointColor : "rgba(151,187,205,1)",
  28.                     pointStrokeColor : "#fff",
  29.                     data : [28,48,40,19,96,27,100,0]
  30.                 }
  31.             ]
  32.  
  33.         }
  34.  
  35.     var ctx = document.getElementById("myChart").getContext("2d");
  36.     new Chart(ctx).Line(data);
  37.  
  38. </script>
  39. </html>

http://pan.baidu.com/s/1hqwbBZu

chart.js制作折线图的更多相关文章

  1. Vue整合d3.v5.js制作--折线图(line)

    先上效果图(x轴固定为时间轴): 图中出现的悬浮框是鼠标悬停效果 1.环境说明: vue版本:"vue": "^2.5.2" d3版本:"d3&quo ...

  2. JFreeChart在制作折线图

    JFreeChart在制作折线图的时候可以使用两种不同的方式 package Line; import java.awt.Color; import java.awt.Font; import org ...

  3. Microsoft Excel Sheet/表格 制作折线图

    Microsoft Excel Sheet/表格 制作折线图 虽然比较简单,但是仍然需要稍微花一点功夫. 1.制作好表格数据 2.先将数据选定(不包括 横座标的 年月日或其他的刻度 的那一列) 3.插 ...

  4. 使用 Vue.js 和 Chart.js 制作绚丽多彩的图表

    本文作者:Jakub Juszczak 编译:胡子大哈 翻译原文:http://huziketang.com/blog/posts/detail?postId=58e5e0e1a58c240ae35b ...

  5. 使用Vue.js 和Chart.js制作绚丽多彩的图表

    前言 深入学习 chart.js 的选项来制作漂亮的图表.交互式图表可以给你的数据可视化提供很酷的展示方式.但是大多数开箱即用的解决方案用默认的选项并不能做出很绚丽的图表. 这篇文章中,我会教你如何自 ...

  6. Python制作折线图

    利用python的第三方包Pygal制作简单的折线图. 申明:本文仅供学习交流使用.源码大部分来自<python编程从入门到实践>:如有侵权,请联系我删除. 1 #!usr/bin/env ...

  7. excel制作折线图太麻烦？试试这些折线图在线生成工具

    折线图是以折线的上升或下降来表示统计数量的增减变化的统计图,叫作折线统计图.用折线的起伏表示数据的增减变化情况,不仅可以表示数量的多少,而且可以反映数据的增减变化情况.并且折线图也是目前最方便的一种统 ...

  8. d3.js画折线图

    下载d3.zip,并解压到网页文件所在的文件夹 windows下,在命令行进入网页文件夹,输入 python -m http.server 在浏览器中输入127.0.0.1:8000/xxx.html ...

  9. d3.js制作蜂巢图表带动画效果

    以上是效果图,本图表使用d3.js v4制作.图表主要功能是在六边形格子中显示数据,点击底部图标可以切换指定格子高亮显示,图表可以随浏览器任意缩放. 1.图表的主体结构是由正六边形组成,使用d3生成六 ...

随机推荐

  1. 配置linux中文

    1.~/.bash_profile文件添加一下内容并执行source  ~/.bash_profile export NLS_LANG=AMERICAN_AMERICA.ZHS16GBK 2./etc ...

  2. linq读书笔记1-linq 初步

    至于linq是什么之类的已经有过太多的文章介绍,亦不清楚的胡朋友可以自己搜索一下便可以得到大量的答案 为了体验linq究竟能带给我们什么体验,我们直接从代码入手: string[] words = n ...

  3. Java数据库缓存思路

    为什么要用缓存?如果问这个问题说明你还是新手,数据库吞吐量毕竟有限,每秒读写5000次了不起了,如果不用缓存,假设一个页面有100个数据库操作,50个用户并发数据库就歇菜,这样最多能支撑的pv也就50 ...

  4. DTO学习系列之AutoMapper（一）

    一.前言 DTO(Data Transfer Object)数据传输对象,注意关键字“数据”两个字,并不是对象传输对象(Object Transfer Object),所以只是传输数据,并不包含领域业 ...

  5. hdu3714 三分

    Error Curves Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Tota ...

  6. C# post请求 HttpWebRequest

    //body是要传递的参数,格式"roleId=1&uid=2" //post的cotentType填写: //"application/x-www-form-u ...

  7. cocos2d安卓android长音效播放不完全

    是因为安卓限制了音效的内存,一般把mp3的比特率压缩一下.就可以搞定了.

  8. Microsoft Certification List

    Exam Title Files 70-178 Microsoft Project 2010, Managing Projects 16 70-243 Administering and Deploy ...

  9. android:duplicateParentState属性解释

    android:duplicateParentState指的是当前控件是否跟随父控件的(点击.焦点等)状态 例:假设一Layout有两子View,对Layout进行监听点击事件:子ViewA一个设置d ...

  10. [置顶] Android学习系列-Android中解析xml（7）

    Android学习系列-Android中解析xml(7) 一,概述 1,一个是DOM,它是生成一个树,有了树以后你搜索.查找都可以做. 2,另一种是基于流的,就是解析器从头到尾解析一遍xml文件.   ...