<!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. SQL函数简述

    数字函数ABS 取绝对值 POWER 乘方 LN 10为底数取幂SQRT 平方根 EXP e的n次乘方 LOG(m,n) m为底数n取幂数学运算函数:ACOS ATAN ATAN2 COS COSH ...

  2. compass安装

    修改ruby软件包的sources 国外服务器不给力,经常链接失败,换成国内淘宝的:https://ruby.taobao.org/ 先移除本有的sources gem sources --remov ...

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

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

  4. 转载 Silverlight实用窍门系列：1.Silverlight读取外部XML加载配置---（使用WebClient读取XAP包同目录下的XML文件））

    转载:程兴亮文章,地址;http://www.cnblogs.com/chengxingliang/archive/2011/02/07/1949579.html 使用WebClient读取XAP包同 ...

  5. 系统提供的UIImagePickerController

    1.从系统相册中读取 /* 判断选择的读取类型是否支持 UIImagePickerControllerSourceTypePhotoLibrary,普通相册 UIImagePickerControll ...

  6. hdu 1196

    Problem Description Given an positive integer A (1 <= A <= 100), output the lowest bit of A. F ...

  7. C#限制转换后的double小数点留1位

    glb_timer1WaitSeconds += 0.1; string s = string.Format("{0:f1}", glb_timer1WaitSeconds);

  8. 电脑文本text和部分文字出现其他语言乱码

     1.文本的编码存在问题 解决办法: 将text文件打开>>文件(左上角)>>另存为>>选择其他格式的编码试试(在保存键左侧)>>保存再打开 2.系统区 ...

  9. 使用spool命令从Oracle导出数据

    公司的网站用的是Oracle数据库,最近要导出里面的数据,使用mysql数据库 spool D:\DB\{文件名}.sql set heading off; set echo off; set fee ...

  10. BasicExcel说明文档

    BasicExcel说明文档 BasicExcel原始链接:http://www.codeproject.com/Articles/13852/BasicExcel-A-Class-to-Read-a ...