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

 
 
主要方法：
数据：
var vals = [12,32,5,67,5,43,76,32,5];
生成折线图：
$("testid").empty().sparkline(vals, {width: "100%"});
然后折线图就出来了，是不是相当简单啊？
 
 
代码：
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5.   <title>SlickGrid example 10: Async post render</title>
  6.   <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
  7.   <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/>
  8.   <link rel="stylesheet" href="examples.css" type="text/css"/>
  9.   <style>
  10.     .cell-title {
  11.       font-weight: bold;
  12.     }
  13.  
  14.     .cell-effort-driven {
  15.       text-align: center;
  16.     }
  17.  
  18.     .description * {
  19.       font-size: 11pt;
  20.     }
  21.   </style>
  22. </head>
  23. <body>
  24. <div style="width:600px;float:left;">
  25.   <div class="grid-header" style="width:100%">
  26.     <label>Scores:</label>
  27.   </div>
  28.   <div id="myGrid" style="width:100%;height:500px;"></div>
  29. </div>
  30.  
  31. <div style="margin-left:650px;margin-top:40px;" class="description">
  32.   <h2>Demonstrates:</h2>
  33.  
  34.   <p>
  35.     With SlickGrid, you can still have rich, complex cells rendered against the actual DOM nodes while still preserving
  36.     the speed and responsiveness.
  37.     This is achieved through async background post-rendering.
  38.     SlickGrid exposes a <u>asyncPostRender</u> property on a column which you can use to set your own function that will
  39.     manipulate the cell DOM node directly.
  40.     The event is fired one by one for all visible rows in the viewport on a timer so it doesn't impact the UI
  41.     responsiveness.
  42.     You should still make sure that post-processing one row doesn't take too long though.
  43.     SlickGrid will figure out what and when needs to be updated for you.
  44.   </p>
  45.  
  46.   <p>
  47.     The example below is a list of 500 rows with a title and 5 integer cells followed by graphical representation of
  48.     these integers.
  49.     The graph is drawn using a CANVAS element in the background.
  50.     The grid is editable, so you can edit the numbers and see the changes reflected (almost) immediately in the graph.
  51.     The graph cell behaves just like an ordinary cell and can be resized/reordered.
  52.     The graphs themselves are created using the excellent <a href="http://www.omnipotent.net/jquery.sparkline/"
  53.                                                              target="_blank">jQuery Sparklines</a> library.
  54.   </p>
  55. </div>
  56.  
  57. <script src="../lib/firebugx.js"></script>
  58.  
  59. <script src="../lib/jquery-1.7.min.js"></script>
  60. <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script>
  61. <script src="../lib/jquery.event.drag-2.0.min.js"></script>
  62. <script src="../lib/jquery.sparkline.min.js"></script>
  63.  
  64. <script src="../slick.core.js"></script>
  65. <script src="../slick.editors.js"></script>
  66. <script src="../slick.grid.js"></script>
  67.  
  68. <script>
  69.   function requiredFieldValidator(value) {
  70.     if (value == null || value == undefined || !value.length) {
  71.       return {valid: false, msg: "This is a required field"};
  72.     } else {
  73.       return {valid: true, msg: null};
  74.     }
  75.   }
  76.  
  77.   function waitingFormatter(value) {
  78.     return "wait...";
  79.   }
  80.  
  81.   function renderSparkline(cellNode, row, dataContext, colDef) {
  82.     var vals = [
  83.       dataContext["n1"],
  84.       dataContext["n2"],
  85.       dataContext["n3"],
  86.       dataContext["n4"],
  87.       dataContext["n5"]
  88.     ];
  89.  
  90.     $(cellNode).empty().sparkline(vals, {width: "100%"});
  91.   }
  92.  
  93.   var grid;
  94.   var data = [];
  95.   var columns = [
  96.     {id: "title", name: "Title", field: "title", sortable: false, width: 120, cssClass: "cell-title"},
  97.     {id: "n1", name: "1", field: "n1", sortable: false, editor: Slick.Editors.Integer, width: 40, validator: requiredFieldValidator},
  98.     {id: "n2", name: "2", field: "n2", sortable: false, editor: Slick.Editors.Integer, width: 40, validator: requiredFieldValidator},
  99.     {id: "n3", name: "3", field: "n3", sortable: false, editor: Slick.Editors.Integer, width: 40, validator: requiredFieldValidator},
  100.     {id: "n4", name: "4", field: "n4", sortable: false, editor: Slick.Editors.Integer, width: 40, validator: requiredFieldValidator},
  101.     {id: "n5", name: "5", field: "n5", sortable: false, editor: Slick.Editors.Integer, width: 40, validator: requiredFieldValidator},
  102.     {id: "chart", name: "Chart", sortable: false, width: 60, formatter: waitingFormatter, rerenderOnResize: true, asyncPostRender: renderSparkline}
  103.   ];
  104.  
  105.   var options = {
  106.     editable: true,
  107.     enableAddRow: false,
  108.     enableCellNavigation: true,
  109.     asyncEditorLoading: false,
  110.     enableAsyncPostRender: true
  111.   };
  112.  
  113.   $(function () {
  114.     for (var i = 0; i < 500; i++) {
  115.       var d = (data[i] = {});
  116.  
  117.       d["title"] = "Record " + i;
  118.       d["n1"] = Math.round(Math.random() * 10);
  119.       d["n2"] = Math.round(Math.random() * 10);
  120.       d["n3"] = Math.round(Math.random() * 10);
  121.       d["n4"] = Math.round(Math.random() * 10);
  122.       d["n5"] = Math.round(Math.random() * 10);
  123.     }
  124.  
  125.     grid = new Slick.Grid("#myGrid", data, columns, options);
  126.   })
  127. </script>
  128. </body>
  129. </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. [翻译］java nio 概述

    原文地址:http://tutorials.jenkov.com/java-nio/overview.html java NIO 包含一下核心内容: Channels Buffers Selector ...

  2. (转)json+flexgrid+jbox组合运用页面刷新<jsp>

    插件效果 1.JSP页面 1 <%@ page language="java" contentType="text/html; charset=UTF-8" ...

  3. Topcoder SRM 597

    妈蛋第一场tc就掉分,提交了第一个题的时候就注定悲剧要发生了,妈蛋没考虑0就直接%了,真的是人傻见识又少,第二题最后有了一点思路,没时间写了,可能也不是很准确,第三题想了小会儿效果为0! 然后第一题傻 ...

  4. 简单分组背包ACboy needs your help（hdu1712）

    题意:有n个任务,完成期限是m天,a[i][j]代表第i个任务用j天完成可以获得的利益,问在这m天里面可以获得的最大利益,每次只能做一个任务,即多个任务不能同时做; 分析;用dp[i][j]代表在做第 ...

  5. The golden ratio: 1.618

    http://www.chinaz.com/design/2015/1109/467968_2.shtml The golden ratio: 1.618 a/b=b/(a+b) The Fibona ...

  6. ofbiz进击 第三节。 各个关键文件的说明与作用

    1.  entityengine.xml   数据引擎文件 用于配置数据库链接设置 <group-map group-name="org.ofbiz" datasource- ...

  7. mysql报错 "code":"08S01","msg":"SQLSTATE

    2016-04-25 09:22 97人阅读 评论(0) 收藏 举报 分类: Magento(6) 今天在批量伪造测试数据时,MySQL收到下面异常:ERROR 1153 (08S01): Got a ...

  8. oracle的会话（session）

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

  9. SQL 中常见的系统存储过程

    -- 来源于网络 -- 更详细的介结参考联机帮助文档 xp_cmdshell --*执行DOS各种命令,结果以文本行返回. xp_fixeddrives --*查询各磁盘/分区可用空间 xp_logi ...

  10. zw版【转发·台湾nvp系列Delphi例程】HALCON SelectObj

    zw版[转发·台湾nvp系列Delphi例程]HALCON SelectObj procedure TForm1.Button1Click(Sender: TObject);var img : HIm ...