<!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. mysql判断某个字符串是否包含另一个

    like SELECT * FROM wx_webauth_userinfo where city LIKE "%台%";"; 结果: 函数find_in_set(str ...

  2. CSS3绘制环形进度条

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

  3. (转)HTTP 无法注册 URL http://+:9999/CalculatorService/。进程不具有此命名空间的访问权限

    写WCF时在 1 host.Open(); 报错:HTTP 无法注册 URL http://+:9999/CalculatorService/.进程不具有此命名空间的访问权限(有关详细信息,请参见 h ...

  4. NSLog设置不打印

    在调试应用程序的时候经常需要进行打印需要的信息,但是当打印的地方多了之后在真机上跑应用程序就会相应的慢很多,输出语句多了之后会在很大程序上影响应用程序的性能.这里我们可以定义一个宏来控制是否输出调试信 ...

  5. No2_3.接口继承多态_Java学习笔记_多态

    ***多态***1.多态性:通常使用方法的重载(Overloading)和重写(Overriding)实现类的多态:2.重写之所以具有多态性,是因为父类的方法在子类中被重写,方法名相同,实现功能不同. ...

  6. 【android】android下的junit

    <instrumentation android:name="android.test.InstrumentationTestRunner" android:targetPa ...

  7. html5 百分比计算

    这几天一直在看html5,看到了百分比的计算公式:目标元素的尺寸/上下文元素的尺寸=百分比尺寸.看到这个公式,有点懂,但是有不明白.对于目标元素很容易理解,但是对于上下文元素就不是很好理解了.试了一些 ...

  8. 使用 PHP 读取文本(TXT)文件 并分页显示

    <?php //----------------you should save this file as m.php---------------- session_start(); if (e ...

  9. Labeling Balls--poj3687

    Labeling Balls Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 12273   Accepted: 3516 D ...

  10. tp28xx port pin (open-drain )and (push-pull) 和open collector）

    具有开漏(OD)输出的器件是指内部输出和地之间有个N沟道的MOSFET(T1),这些器件可以用于电平转换的应用.输出电压由Vcc'决定.Vcc'可以大于输入高电平电压VCC(up-translate) ...