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

 
 
主要方法：
数据：
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. SQL Server Index详解

    最近在进行数据库调优,对索引的使用和其内部的运转一知半解.在园子里看到一篇相关文章非常好.留下印记以便日常查找. http://www.cnblogs.com/xwdreamer/archive/20 ...

  2. windows 计算机 管理 命令

    compmgmt.msc

  3. The Havel-Hakimi Algorithm

    1.If any di>=n then fail 2.If there is an odd number of odd degrees then fail 3.If there is a di& ...

  4. js字符串转化为方法调用

    function alertFunc(str1,str2,str3){ alert(str1); alert(str2); alert(str3); } function callAlert(func ...

  5. ACM之Java速成(2)

    acm中Java的应用 Chapter I. Java的优缺点各种书上都有,这里只说说用Java做ACM-ICPC的特点: (1) 最明显的好处是,学会Java,可以参加Java Challenge ...

  6. poj: 3006

    简单题 #include <iostream> #include <stdio.h> #include <string> #include <stack> ...

  7. spark sql cache

    1.几种缓存数据的方法 例如有一张hive表叫做activity 1.CACHE TABLE //缓存全表 sqlContext.sql("CACHE TABLE activity" ...

  8. For 循环嵌套 0309

                                                                                                     For ...

  9. Visual Studio 2012 怪异的自动重启

    学生在做项目的过程中遇到这种问题: -------------- 用 Visual Studio 2012  开发W中eb 项目时,最近总是莫名其妙的自动重启. 后来试了一下,发现是只要在页面中输入 ...

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

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