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. shell常用命令的用法

    1. 如何把 /etc/passwd 中用户uid 大于500 的行给打印出来?awk -F ':' '$3>500' /etc/passwd 2. awk中 NR,NF两个变量表示什么含义?N ...

  2. line-hight-(行高)解析

    行高定义:line-height属性是指文本行基线之间的距离. 顶线.中线.基线.底线概念 从上到下四条线分别是顶线.中线.基线.底线,很像才学英语字母时的四线三格,我们知道vertical-alig ...

  3. onblur判断数字

    window.onload = function () { document.getElementById('text1').onblur = function () { if (isNaN(docu ...

  4. jmeter初识

    Jmeter是一款开源的性能测试工具,基于协议的方式生成脚本进行负载,模仿几十或上百的用户访问程序,相比Loadrunner,Jmeter只有几十个M,Jmeter需要jdk环境的配置,计数器和报告没 ...

  5. ORACLE触发器概述之【行触发器】【weber出品】

    1. 行触发器的定义 行触发器是指执行DML操作时,每作用一行就触发一次的触发器.审计数据变化时,可以使用行触发器 2. 建立行触发器的语法如下: create or replace trigger ...

  6. sqlserver2005重新安装(安装汇编错误,安装程序无法连接到数据库服务进行服务配置)

    2014-01-09 16:41 1687人阅读 评论(1) 收藏 举报 分类: 数据库(1) 版权声明:本文为博主原创文章,未经博主允许不得转载. sqlserver2005重新安装(安装汇编错误, ...

  7. ESP8266固件修改可以控制多个IO方法

    之前在论坛上找到了一个通过ESP8266可以控制GPIO0的固件和app,但是自己做的家庭影音灯光系统是需要控制多个IO从而控制STM32.通过观看大明的视频,了解了GPIO的控制方法. 在固件的ap ...

  8. 关于JS中的this关键字

    在学习js时,应该先了解下this关键字,关于js中的this关键字和其他的面向对象语言中的this是不同的,比如在java中,this指的的是当前对象,而在js中,w3c是这样规定的: 关键字 th ...

  9. 关于Django模板渲染一个很重要的用途

    一般情况下我们在模板利用django的for标签循环生成html代码时,可以同时生成形如: "{% url 'dormitory:hygiene_detail' pk={{ id }} %} ...

  10. python多进程断点续传分片下载器

    python多进程断点续传分片下载器 标签:python 下载器 多进程 因为爬虫要用到下载器,但是直接用urllib下载很慢,所以找了很久终于找到一个让我欣喜的下载器.他能够断点续传分片下载,极大提 ...