<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

<script src="Chart.js-master/Chart.min.js"></script>

<body>

<div class="canvasWrapper">

<canvas id="myChart" width="600" height="400"></canvas>

</div>

</body>

<script>

        var data = {

            labels : ["January","February","March","April","May","June","July","444"],

            datasets : [

                {

                    fillColor : "rgba(220,220,220,0.5)",

                    strokeColor : "rgba(220,220,220,1)",

                    pointColor : "rgba(220,220,220,1)",

                    pointStrokeColor : "#fff",

                    data : [65,59,90,81,56,55,40,99]

                },

                {

                    fillColor : "rgba(151,187,205,0.5)",

                    strokeColor : "rgba(151,187,205,1)",

                    pointColor : "rgba(151,187,205,1)",

                    pointStrokeColor : "#fff",

                    data : [28,48,40,19,96,27,100,0]

                }

            ]

        }

    var ctx = document.getElementById("myChart").getContext("2d");

    new Chart(ctx).Line(data);

</script>

</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. 最流行的android组件大全

    目录 [−] 工具和教程 UI组件 类库 游戏引擎 Android HTML5应用 Android 是目前最流行的移动操作系统(还需要加之一吗?). 随着新版本的不断发布, Android的功能也日益 ...

  2. JavaScript 函数基础

    1. JavaScript 函数基础 1. 定义方法 2. 函数的调用方法 3. 函数方法 apply : 将函数作为数组的方法来调用 将参数以数组形式传递给该方法 call   : 将函数作为对象的 ...

  3. EF中的约定

    优先级:Fluent API >数据注释>约定 CodeFirst约定 主键约定 如果类的属性名为"ID"(不区分大小写)或类名的后面跟有"ID", ...

  4. 解决Android AVD启动报错问题

    好不容易从ADT Bundle转为Android Studio的开发环境,一路荆棘,现在又遇到了模拟器的问题,本来直接用真机调试程序会更快些,但是为了模拟多种系统不得不开启AVD. 废话不说,问题和解 ...

  5. jedis处理redis cluster集群的密码问题

    环境介绍:jedis:2.8.0 redis版本:3.2 首先说一下redis集群的方式,一种是cluster的 一种是sentinel的,cluster的是redis 3.0之后出来新的集群方式 本 ...

  6. 未在本地计算机上注册"Microsoft.ACE.OLEDB.12.0"提供程序

    运行时出现了错误,提示未在本地计算机上注册"Microsoft.ACE.OLEDB.12.0"提供程序. 这个问题的原因是64位PC上安装了Office的32位版本,所以Micro ...

  7. textField:shouldChangeCharactersInRange:replacementString:

    http://blog.csdn.net/mamong/article/details/44964801

  8. 16-js-缓冲运动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Jasper_crosstab_columngroup header position config - (headerPosition="Stretch")

    Position of Totals RowThe totalPosition attribute controls the appearance of the row that displays t ...

  10. 可以ping通，浏览器打不开网页 - 解决办法

    网络故障表现为: 1.电脑显示网络连接正常,DNS配置和hosts配置均正常 2.cmd可以ping通网址,域名 3.所有浏览器无法打开网页,有道云笔记置灰,微信二维码刷新失败 解决办法: 管理员权限 ...