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

 
 
主要方法：
数据：
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. H2的MVStore

    翻译自http://www.h2database.com/html/mvstore.html 转载请著名出处,及译者信息. 第一次翻译,诸多不妥请谅解,谢谢. 概述 MVStore是一个持久化的.日志 ...

  2. oracle开启numa的支持

    在11.2中,即使是系统支持numa架构,oracle默认也不再检测硬件是否支持numa,也不开启对numa的支持. 要想开启对numa的支持,必须设置隐含参数: _enable_NUMA_suppo ...

  3. PostgreSQL 非持久化设置(Non-Durable Settings)

    Durability is a database feature that guarantees the recording of committed transactions even if the ...

  4. [转] 国内外最全面和主流的JS框架与WEB UI库（强烈推荐）

    国内外最全面和主流的JS框架与WEB UI库...   当下对于网站前段开发人员来说,很少有人不使用一些JS框架或者WEB UI库,因此这些可以有效提高网站前段开发速度,并且能够统一开发环境,对于不同 ...

  5. several生命周期

    several生命周期 1. 实例化: 容器调用servlet创建servlet对象 2. 初始化: <init-param> <param-name> company < ...

  6. HDU 1052 Tian Ji -- The Horse Racing（贪心）（2004 Asia Regional Shanghai）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1052 Problem Description Here is a famous story in Ch ...

  7. Codeforces Round #312 (Div. 2) E. A Simple Task

    题目大意就是给一个字符串,然后多个操作,每次操作可以把每一段区间的字符进行升序或者降序排序,问最终的字符串是多少. 一开始只考虑字符串中字符'a'的情况,假设操作区间[L,R]中有x个'a',那么一次 ...

  8. Codeforces Round #288 (Div. 2)

    A. Pasha and Pixels     题意就是给一个n*m的矩阵,k次操作,一开始矩阵全白,一次操作可以染黑一个格子,问第几次操作可以使得矩阵中存在一个2*2的黑色矩阵.直接模拟即可 代码: ...

  9. oracle ebs 采购订单关闭之PL/SQL实现方法

    应客户需求,需要写个脚本,批量关闭Bonus Item类型的采购订单,在metalink上搜索到一些方法,但是都测试不通.原来需要将代码生成一个并发程序.下面是测试成功的代码. 1.首先创建一个存储过 ...

  10. 夺命雷公狗—angularjs—23—copy拷贝对象

    copy这在angularjs中是一个拷贝对象的方法: <!DOCTYPE html> <html lang="en" ng-app="myapp&qu ...