JavaScript/HTML5 Charts 2.9.3更新说...-pretty漂亮地格式化json-DataTable学习笔记---排序细则、列隐藏[3]

当前位置: 编程技术>WEB前端

本页文章导读:

▪JavaScript/HTML5 Charts 2.9.3更新说明[附下载] JavaScript/HTML5 Charts 本月最新发布2.9.3版本。另外一个移动金融图表 Javascript/HTML5 Stock Chart 也同步更新至2.9.3。JavaScript/HTML5 Charts支持丰富的2D/3D图表类型，兼容所有常用浏览器，而更重要的是，.........

▪pretty漂亮地格式化json JSON.stringify(jsonObj, null, '\t'); "{ "region": null, "mcaPath": null, "pkgName": "com.pkg", "downloadCount": 0, "mdaPath": null, "label": null, "googleCategory&qu.........

▪DataTable学习笔记---排序细则、列隐藏[3] 耽误了好几天，因为要做一个嵌入式的实验-android内核编译与裁剪，很久之前装的wubi不知道为什么运行出错了，然后看着当前的win7系统觉得有点讨厌了，也是因为快1年半.........

[1]JavaScript/HTML5 Charts 2.9.3更新说明[附下载]

来源: 发布时间: 2013-11-06

JavaScript/HTML5 Charts 本月最新发布2.9.3版本。另外一个移动金融图表 Javascript/HTML5 Stock Chart 也同步更新至2.9.3。JavaScript/HTML5 Charts支持丰富的2D/3D图表类型，兼容所有常用浏览器，而更重要的是，这款图表工具完全基于最新的JavaScript/HTML5移动开发技术。新版本新增多个属性，还有多个bug修复。

>>JavaScript/HTML5 Charts 2.9.3下载

新功能：

新增AxisBase.minGap属性，可以设置网格线之间的最小间隔，适用于水平轴以及autoGridCount=true；
ChartCursor新增"selected"事件，当selectWithoutZooming为true时用户可以进行选择；
AmGraph新增labelColorField，可以将个人数据标签设置成不同的颜色；
CategoryAxis新增forceShowField，可以将某些分类字段设置成一直显示，前提是categoryAxis.parseDates = false；
AmCoordinateChart新增rightClickGraphItem事件；
Chart Cursor的"changed"事件有一个新属性：mostCloseGraph，前提是chartCursor.oneBalloonOnly = true；
AmPieChart新增labelRadiusField属性，它可以设定饼图和数据标签之间的距离。注意，设置labelRadiusField不用担心数据标签会被覆盖；
默认操作改变：当设置缩放基于数据的图表时，必须精确到日期。例如，如果你想让图表只显示某一天，设置日期从2012,1,1到 Date(2012,1,2)或Date(2012,1,1,23,59,59)。以前可以将相同的日期设置为开始和结束日期，然后图表会自动选择"minPeriod"，这样图表在显示月份或年份时可能会发生错误。
新增AmCharts.clear方法，如果你想将页面中的图表完全删除，你可以调用这个方法；
Guide新增Above属性，如果你将它设置为true，Guide将显示以上的图表；
你可以创建div元素作为一个图例的容器，设置ID的方法：chart.addLegend(legend, divID)；

Bug修复：

修复了内存泄露的问题；
调用 validateNow()方法后IE会隐藏饼图中的图例；
修复了XY图表外部变焦的问题；
修复了线形图在XP+IE8上不能显示的问题；
如果minPeriod比日期大，末项就不会显示；

JavaScript/HTML5 Charts 2.9.3英文原文：http://blog.amcharts.com/2013/03/new-29x-version-of-javascript-charts.html

本文链接

[2]pretty漂亮地格式化json

来源: 互联网发布时间: 2013-11-06

JSON.stringify(jsonObj, null, '\t');
"{
	"region": null,
	"mcaPath": null,
	"pkgName": "com.pkg",
	"downloadCount": 0,
	"mdaPath": null,
	"label": null,
	"googleCategory": null,
	"phoenixCategory": null
}"

作者：qffj 发表于2013-3-7 10:05:15 原文链接

阅读：0 评论：0 查看评论

[3]DataTable学习笔记---排序细则、列隐藏[3]

来源: 发布时间: 2013-11-06

耽误了好几天，因为要做一个嵌入式的实验-android内核编译与裁剪，很久之前装的wubi不知道为什么运行出错了，然后看着当前的win7系统觉得有点讨厌了，也是因为快1年半没装机了，所以就重新装机了，结果就各种杯具，统计装了2次win7，2次win8，2次wubi，期间碰到了不知多少问题，另一方面限于这可恶的网速，着实让我蛋疼了一把，然后又是各种压力，本人大三了，到了要找实习单位的时候，还有是否决定考研，也挺烦心的。今天趁着有点时间了，继续我们的dataTable学习吧。

1.DataTable排序

1.1 基础知识

dataTable可以多列排序，在表格中，按住shirt，然后选择需要排序的列就可以了。下面是四个重要属性的区分：

属性'bSort':初始化的时候定义整个table是否排序

$(document).ready( function () {
$('#example').dataTable( {
"bSort": false
} );
} );

属性'bSortable':初始化的时候定义具体哪一列是否可排序

$(document).ready( function() {
$('#example').dataTable( {
"aoColumns": [
{ "bSortable": false },
null,
null,
null,
null
] } );
} );

属性'aaSorting':初始化表格的时候，选择以怎样的规则排序

// Sort by 3rd column first, and then 4th column
$(document).ready( function() {
$('#example').dataTable( {
"aaSorting": [[2,'asc'], [3,'desc']]
} );
} );

属性'asSorting':设置具体哪一行的排序规则

// Using aoColumns
$(document).ready( function() {
$('#example').dataTable( {
"aoColumns": [
null,
{ "asSorting": [ "asc" ] },
{ "asSorting": [ "desc", "asc", "asc" ] },
{ "asSorting": [ "desc" ] },
null
]
} );
} );

通过上面的介绍基本上应该清楚这四个属性的含义与不同了吧。接下来给介绍简单排序

1.2 简单排序，单列排序

table初始化的时候使用属性'aaSorting'，属性值是一个array。

$(document).ready(function() {
$('#example').dataTable( {
"aaSorting": [[ 4, "desc" ]]
} );
} );

1.3 多列排序

有了上面的单例排序，外加基础知识里的aaSorting的介绍，范例上面就有，这里就不写了。

1.4 特殊排序规则

这里需要分清几个要点:

1. 首先是sSortDataType.定义数据源类型的排序(主要是input类型)，dom-text,dom-select,dom-checkbox。突然发现以前有个做傻了，当初用checkbox的时候，就应该直接设置sSortDataType.

2.属性sType：定义这列数据类型，包括（string,numeric,date,html)。

3.不带类型检测的排序

老实说这个挺复杂的，怎么写排序规则，然后怎么实现，尽管dataTable有范例，但是没怎么看懂，下面我给出我改过的范例，如果有错误，如果大家发现好一点的范例，欢迎跟我分享，如果有时间我能理解它的范例，我也会及时更新这篇博文的。

定义排序规则的