<!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. IIS注册asp.net 4.0

    如果你是先装的VS后添加的IIS功能,那么你需要在ISS中注册NET Framework: 32位的Windows:------------------------------------------ ...

  2. 注册DLL,Unregister DLL

    前一篇文章,反复注册,反注册.... 写了一个小工具 怎么传图片感觉不对劲,StatusBar应改成 拖动DLL至上方 文件 http://files.cnblogs.com/magicdawn/Dl ...

  3. ajax请求webservice时抛出终止线程的异常

    请求webservice中以下接口,会抛出异常 {"Message":"正在中止线程.","StackTrace":" 在 Sys ...

  4. asp.net 实现 tts

    之前用WinForm实现tts已经成功,就调用了下系统的类库.但我把相同的代码搬到asp.net上时却碰到了许多问题,查了好多网站.试过了很多方法,到现在算是做出了一部分吧. 之前调用微软的TTS是用 ...

  5. IP地址变动后，https://localhost:1158/em无法访问解决办法

    一.解决的方法:重新配置em 二.步骤: 1.在 dos命令下输入 emca –repos drop 注意:监听端口号是一般是1521,特殊情况要在配置文件中找 2.成功删除资料档案库后,在dos下再 ...

  6. HDU 5195 - DZY Loves Topological Sorting

    题意: 删去K条边,使拓扑排序后序列字典序最大 分析: 因为我们要求最后的拓扑序列字典序最大,所以一定要贪心地将标号越大的点越早入队.我们定义点i的入度为di. 假设当前还能删去k条边,那么我们一定会 ...

  7. [Search Engine] Compression in Inverted Index

    最近在学一些搜索引擎的内容,感觉挺费劲,所以就用博客当做自己的笔记,遇到一些需要整理的部分,就在这里整理一下. 今天的内容是对inverted index进行压缩.核心思想,用我自己的话来总结,就是“ ...

  8. 关于JS中的this关键字

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

  9. Ftp不能登陆的解决方法

    ftp登陆不了是很经常碰到的事,很多人常常是不加分析就发贴询问.老实说,这样既浪费自己时间,又浪费别人精力,还常常不能得到满意的回答.因此每一位希望从ftp站点发现资源的朋友都有必要学会分析登陆失败的 ...

  10. B'day Gift

    def main(): n = int(raw_input()) sum = 0 for i in range(n): sum += float(raw_input()) print '%.1f' % ...