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

 
 
主要方法：
数据：
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. linux:网络yum源和制作本地光盘yum源

    linux:存放yum源的位置:/etc/yum.repos.d/,该目录下全是一些yum源 一.网络yum源: 如图:下面全部都是yum源,后缀是".repo"都是合法的yum源 ...

  2. JAVA-语法-运算符

    1.赋值运算符  =  (优先级较低) 2.算数运算符  +  —  *  /  % 3.字符串连接运算   +  (把其他类型转成字符串并和字符串类型进行连接) 4.扩展赋值运算符   +=   — ...

  3. something about css locating.

    CSS position:static:默认属性,静态定位relative:相对定位,相对于父元素的定位,需要配合top,left,right,bottom,z-index等属性absolute:绝对 ...

  4. [转]StuQ 技能图谱（全套13张）

    程序开发语言综述.jpg 前端工程师必备技能.jpg 大数据工程师必备技能.jpg   安全工程师必备技能.jpg 嵌入式开发必备技能.jpg iOS开发工程师必备技能.jpg   移动无线测试工程师 ...

  5. 数据库 CRUD

    1.删除表 drop  table +表名 2.修改表 alter  table+表名+ add(添加)+列名+ int(类型) alter  table+表名+ drop(删除)+column(列) ...

  6. UML：时序图

    时序图是用来描述对象的状态(或某数值)随时间变化而变化的图,一般软件开发中很少会用到. 灯有开和关两种状态,随着时间的推移,期间有人去开或者关这个灯,用时序图表示如下: 注意:蓝色和红色圈圈.黄色底色 ...

  7. android 单例模式

    单例模式特点: 1.一个类只能有一个实例 2.自己创建这个实例 3.整个系统都要使用这个实例 单例模式的形式: 1.饿汉式单例类 public class Singleton { private Si ...

  8. 手动写的第一个eChart代码

    手动写的第一个eChart代码 ,第一感觉,杂乱无章 <!doctype html> <html> <head> <meta charset="UT ...

  9. HashMap存储数据赋值javabean简单示例

    package com.shb.web; import java.util.HashMap; import java.util.Iterator; import java.util.Map; /** ...

  10. Python for z/OS

    Install pythondev Install DB2 or server driver package easy_install ibm_db Get license file from tor ...