SlickGrid example 8:折线图

最新推荐文章于 2022-07-14 11:24:00 发布

羽翼苍穹

最新推荐文章于 2022-07-14 11:24:00 发布

阅读量878

点赞数

分类专栏： SlickGrid 文章标签： slickgrid 折线图

本文链接：https://blog.csdn.net/upskychan/article/details/8553061

版权

SlickGrid 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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

主要方法：

数据：

var vals = [12,32,5,67,5,43,76,32,5];

生成折线图：

$("testid").empty().sparkline(vals, {width: "100%"});

然后折线图就出来了，是不是相当简单啊？

代码：

<!DOCTYPE HTML>

<html>

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=iso-8859-1">

<title>SlickGrid example 10: Asyncpost render</title>

<style>

.cell-title {

font-weight: bold;

}

.cell-effort-driven{

text-align: center;

}

.description * {

font-size: 11pt;

}

</style>

</head>

<body>

<divstyle="width:600px;float:left;">

<label>Scores:</label>

</div>

</div>

<h2>Demonstrates:</h2>

<p>

With SlickGrid, you canstill have rich, complex cells rendered against the actual DOMnodes while still preserving

the speed andresponsiveness.

This is achieved throughasync background post-rendering.

SlickGrid exposes a<u>asyncPostRender</u>property on a column which you can use to set your own functionthat will

manipulate the cell DOMnode directly.

The event is fired oneby one for all visible rows in the viewport on a timer so itdoesn't impact the UI

responsiveness.

You should still makesure that post-processing one row doesn't take too longthough.

SlickGrid will figureout what and when needs to be updated for you.

</p>

<p>

The example below is alist of 500 rows with a title and 5 integer cells followed bygraphical representation of

these integers.

The graph is drawn usinga CANVAS element in the background.

The grid is editable, soyou can edit the numbers and see the changes reflected (almost)immediately in the graph.

The graph cell behavesjust like an ordinary cell and can be resized/reordered.

The graphs themselvesare created using the excellent <ahref="http://www.omnipotent.net/jquery.sparkline/"

target="_blank">jQuerySparklines</a> library.

</p>

</div>

<scriptsrc="../lib/firebugx.js"></script>

<scriptsrc="../lib/jquery-1.7.min.js"></script>

<scriptsrc="../lib/jquery-ui-1.8.16.custom.min.js"></script>

<scriptsrc="../lib/jquery.event.drag-2.0.min.js"></script>

<scriptsrc="../lib/jquery.sparkline.min.js"></script>

<scriptsrc="../slick.core.js"></script>

<scriptsrc="../slick.editors.js"></script>

<scriptsrc="../slick.grid.js"></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 = newSlick.Grid("#myGrid", data, columns, options);

})

</script>

</body>

</html>

羽翼苍穹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录