根据数据生成折线图，使用相当简单，也很容易。

 
 
主要方法：
数据：
var vals = [12,32,5,67,5,43,76,32,5];
生成折线图：
$("testid").empty().sparkline(vals, {width: "100%"});
然后折线图就出来了，是不是相当简单啊？
 
 
代码：
<!DOCTYPE HTML>

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

  <title>SlickGrid example 10: Async post render</title>

  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>

  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/>

  <link rel="stylesheet" href="examples.css" type="text/css"/>

  <style>

    .cell-title {

      font-weight: bold;

    }

    .cell-effort-driven {

      text-align: center;

    }

    .description * {

      font-size: 11pt;

    }

  </style>

</head>

<body>

<div style="width:600px;float:left;">

  <div class="grid-header" style="width:100%">

    <label>Scores:</label>

  </div>

  <div id="myGrid" style="width:100%;height:500px;"></div>

</div>

<div style="margin-left:650px;margin-top:40px;" class="description">

  <h2>Demonstrates:</h2>

  <p>

    With SlickGrid, you can still have rich, complex cells rendered against the actual DOM nodes while still preserving

    the speed and responsiveness.

    This is achieved through async background post-rendering.

    SlickGrid exposes a <u>asyncPostRender</u> property on a column which you can use to set your own function that will

    manipulate the cell DOM node directly.

    The event is fired one by one for all visible rows in the viewport on a timer so it doesn't impact the UI

    responsiveness.

    You should still make sure that post-processing one row doesn't take too long though.

    SlickGrid will figure out what and when needs to be updated for you.

  </p>

  <p>

    The example below is a list of 500 rows with a title and 5 integer cells followed by graphical representation of

    these integers.

    The graph is drawn using a CANVAS element in the background.

    The grid is editable, so you can edit the numbers and see the changes reflected (almost) immediately in the graph.

    The graph cell behaves just like an ordinary cell and can be resized/reordered.

    The graphs themselves are created using the excellent <a href="http://www.omnipotent.net/jquery.sparkline/"

                                                             target="_blank">jQuery Sparklines</a> library.

  </p>

</div>

<script src="../lib/firebugx.js"></script>

<script src="../lib/jquery-1.7.min.js"></script>

<script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>

<script src="../lib/jquery.event.drag-2.0.min.js"></script>

<script src="../lib/jquery.sparkline.min.js"></script>

<script src="../slick.core.js"></script>

<script src="../slick.editors.js"></script>

<script src="../slick.grid.js"></script>

<script>

  function requiredFieldValidator(value) {

    if (value == null || value == undefined || !value.length) {

      return {valid: false, msg: "This is a required field"};

    } else {

      return {valid: true, msg: null};

    }

  }

  function waitingFormatter(value) {

    return "wait...";

  }

  function renderSparkline(cellNode, row, dataContext, colDef) {

    var vals = [

      dataContext["n1"],

      dataContext["n2"],

      dataContext["n3"],

      dataContext["n4"],

      dataContext["n5"]

    ];

    $(cellNode).empty().sparkline(vals, {width: "100%"});

  }

  var grid;

  var data = [];

  var columns = [

    {id: "title", name: "Title", field: "title", sortable: false, width: 120, cssClass: "cell-title"},

    {id: "n1", name: "1", field: "n1", sortable: false, editor: Slick.Editors.Integer, width: 40, validator: requiredFieldValidator},

    {id: "n2", name: "2", field: "n2", sortable: false, editor: Slick.Editors.Integer, width: 40, validator: requiredFieldValidator},

    {id: "n3", name: "3", field: "n3", sortable: false, editor: Slick.Editors.Integer, width: 40, validator: requiredFieldValidator},

    {id: "n4", name: "4", field: "n4", sortable: false, editor: Slick.Editors.Integer, width: 40, validator: requiredFieldValidator},

    {id: "n5", name: "5", field: "n5", sortable: false, editor: Slick.Editors.Integer, width: 40, validator: requiredFieldValidator},

    {id: "chart", name: "Chart", sortable: false, width: 60, formatter: waitingFormatter, rerenderOnResize: true, asyncPostRender: renderSparkline}

  ];

  var options = {

    editable: true,

    enableAddRow: false,

    enableCellNavigation: true,

    asyncEditorLoading: false,

    enableAsyncPostRender: true

  };

  $(function () {

    for (var i = 0; i < 500; i++) {

      var d = (data[i] = {});

      d["title"] = "Record " + i;

      d["n1"] = Math.round(Math.random() * 10);

      d["n2"] = Math.round(Math.random() * 10);

      d["n3"] = Math.round(Math.random() * 10);

      d["n4"] = Math.round(Math.random() * 10);

      d["n5"] = Math.round(Math.random() * 10);

    }

    grid = new Slick.Grid("#myGrid", data, columns, options);

  })

</script>

</body>

</html>

SlickGrid example 8:折线图的更多相关文章

  1. C# 实时折线图，波形图

    此Demo是采用VS自带的Chart图表控件,制作实时动态显示的折线图,和波形图. 涉及到知识如下: Chart 控件,功能强大,可以绘制柱状图,折线图,波形图,饼状图,大大简化了对图的开发与定制. ...

  2. Android开发学习之路-自定义控件（天气趋势折线图）

    之前写了个天气APP,带4天预报和5天历史信息.所以想着要不要加一个折线图来显示一下天气变化趋势,难得有空,就写了一下,这里做些记录,脑袋不好使容易忘事. 先放一下效果: 控件内容比较简单,就是一个普 ...

  3. react-echarts之折线图的显示

    react中想要实现折线图和饼图的功能,需要引入react-echarts包,然后再实现折线图的功能.我这里引用的版本是:0.1.1.其他的写法参echarts官网即可.下面详细讲解的是我在react ...

  4. 用canvas绘制折线图

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

  5. MPAndroidChart 3.0——LineChart（折线图）

    显示效果 MPAndroidChart每一种图表的基本使用方式都基本相同 了解一种图表的实现 参考项目源码其他的图表也就差不多哩 在布局文件中定义 <com.github.mikephil.ch ...

  6. echart折线图小知识

    1)在折线图中,有时我们不想让太多折线显示,那么就隐藏,点击legend区域文字再显示. 比如我们要隐藏的折线叫"联盟广告",代码如下 var selected = {}; sel ...

  7. hellocharts的折线图与柱状图的结合之ComboLineColumnChartView

    哼哼,网上找了半天都不全,所以决定自己写一个完整的可以直接贴代码的 test.xml <?xml version="1.0" encoding="utf-8&quo ...

  8. Android自定义折线图

    老师布置了个作业:http://www.cnblogs.com/qingxu/p/5316897.html 作业中提到的 “玩了几天以后,大家发现了一些很有意思的现象,比如黄金点在逐渐地往下移动.” ...

  9. Morris.js和flot绘制折线图的比较

    [文章摘要] 最近用开源的AdminLTE做框架感觉效果特别好,其针对图表库Morris.js和flot都提供了不错的支持,也都提供了这两者的例子.不过Morris.js是基于Raphael.js来的 ...

随机推荐

  1. hibernate3与ehcache-2.8.3配合使用，在多个SessionFactory实例的情况下出现“Another unnamed CacheManager already exists in the same VM”问题

    不想看分析过程的,直接拉到最下面看第4部分 1. 问题背景 由于某些原因,项目中使用了hibernate3与ehcache-2.8.3在配合使用,又由于某些原因,需要使用多个SessionFactor ...

  2. IntelliJ IDEA 下的版本控制介绍

    不管是个人开发或是团队开发,版本控制都是可以很好地被使用的,目前我找不到任何开发者不使用版本控制的理由.而且对于 IDE 来讲,集成版本控制的本身就是它最大的亮点之一,很多开发者也是为此而使用它. 在 ...

  3. SQL 数据库 连接查询 变量、if else、while

    一.连接查询:通过连接运算符可以实现多个表查询. 连接是关系数据库模型的主要特点,也是它区别于其它类型数据库管理系统的一个标志. 常用的两个链接运算符: 1.join   on(左右连接) 2.uni ...

  4. git的基本使用

    1.在本地新建一个文件夹来存放代码 2.用命令行进入这个文件夹 3.git init --来创建一个代码仓库 3. 配置用户信息:用户名和 邮箱(联系作者本人沟通, 责任到人) git config ...

  5. 。。。Hibernate 查询数据 事务管理。。。

    在Hibernate中,查询数据的时候,可能会需要事务的管理,为什么呢?因为在查询数据库的时候,Hibernate将数据从数据库里面查询出来之后,会先把数据放入Hibernate的session缓存里 ...

  6. TP隐藏入口

    我们知道,在thinkphp的案例中有一个.htaccess文件,里面配置了URL的一些重写规则,如: <IfModule mod_rewrite.c>  RewriteEngine on ...

  7. SQL Server练习

    SQL Server 基本语法: http://www.w3school.com.cn/sql/sql_intro.asp 练习1: 运行语句: USE [Test1] select FNumber, ...

  8. oracle的会话（session）

    会话(session)是oracle服务器对数据库连接用户记录的一种手段. oracle提供了v_$session的视图存储当前数据库的会话,查询时用v_$session 或v$session sql ...

  9. 【php】目录、路径和文件 操作

    目录操作 解析路径: basename() - 返回路径的文件名部分 获取目录部分: dirname() - 返回路径的目录部分 路径信息: pathinfo() - 返回数组(目录名,基本名,扩展名 ...

  10. Linux下/etc/resolv.conf 会被重新写入

    主要原因是因为安装了network manager,所以在启动后每次都会重写这个文件. 所以需要在network manager->eth0->ipv4->Automatic(DHC ...