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

 
 
主要方法：
数据：
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. simple python code when @ simplnano

    code: import serial,time,itertools try: ser=serial.Serial(2,115200,timeout=0) except: print 'Open CO ...

  2. 《30天自制操作系统》06_day_学习笔记

    harib03a: 内容没有变化 :P109 从这里开始,代码开始工程化了. 将原本300多行的bootpack.c分割成了三部分: graphic.c      : 用来处理界面图像 dsctbl. ...

  3. Error : L6218E: Undefined symbol downloadAddress (referred from nand.o).

    MKD 报错: linking...LCD.axf: Error: L6218E: Undefined symbol EnZK (referred from ht128x64.o).LCD.axf: ...

  4. int和long long有符号整形 负数比正数多一个

    int的负数比正数多一个,则有一个负数在int范围内没有对应的正数 最大正整数用十六进制,很容易表示:0x7f ff ff ff int num = 0x7fffffff; num = -num; p ...

  5. MFC架构

    MFC的六大关键技术: 1)MFC程序的初始化过程 2)消息映射 3)运行时类型识别(RTTI) 4)动态创建 5)永久保存 6)消息传递 一.MFC的初始化过程: MFC的架构组成: 1.要有CWi ...

  6. 科学计算器的Java实现

    简易的科学计算器的实现 ---Java版 import javax.swing.*;//新的窗口组件包 import java.awt.*; import java.awt.event.*; publ ...

  7. nyist 593 Take it easy

    http://acm.nyist.net/JudgeOnline/problem.php?pid=593 Take it easy 时间限制:1000 ms  |  内存限制:65535 KB 难度: ...

  8. Ruby操作Excel的方法与技巧大全

    测试工作中,批量的数据通常会放到excel表格中,测试输出的数据写回表格中,这样输入输出易于管理,同时清晰明了 使用ruby来操作excel文件首先需要在脚本里包含以下语句 require'win32 ...

  9. ACdream 1104 瑶瑶想找回文串（SplayTree + Hash + 二分）

    Problem Description 刚学完后缀数组求回文串的瑶瑶(tsyao)想到了另一个问题:如果能够对字符串做一些修改,怎么在每次询问时知道以某个字符为中心的最长回文串长度呢?因为瑶瑶整天只知 ...

  10. ligerUI_入门_001_设置文本能否被编辑、事件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...