前面实现了Ext动态生成图表的功能,满足了基本的要求。后面用户提出这样的问题:有如下的数据:
月份 电量 单位
201201 33 郑州
201202 35 郑州
201203 34 郑州
201204 36 郑州
201205 34.3 郑州
201201 29 新乡
201202 26 新乡
201203 27 新乡
201204 28 新乡
201205 28.8 新乡
201201 23 安阳
201202 25 安阳
201203 24 安阳
201204 26 安阳
201205 24.3 安阳
预期能够显示郑州、安阳、新乡三个序列,但Ext图表本身不支持把这样的数据显示成三个图表序列:如果X轴选月份,y轴选电量,就会显示成三遍201201—201205的数据,而显示不出来郑州、新乡和安阳的标识。
为了实现这样的数据显示出来三个序列,分别为郑州、新乡、安阳的电量,就需要自己实现对这样数据的转换,转换成如下的形式:
月份 郑州-电量 新乡-电量 安阳-电量
201201 33 29 23
201202 35 26 25
201203 34 27 24
201204 36 28 26
201205 34.3 28.8 24.3
这样,Ext的图表就能把它显示成三个序列了。
我写了如下的函数实现这个功能:
function CovertData(jsonData,idField, fromField, toField){
var result = [], curRecord =null, num;
var fromFields = fromField.split(',');
// 循环整个数组:[{...},{...},{...},...]
for(var idx=0;idx<jsonData.length;idx++){
num = findIdx(result, idField, jsonData[idx][idField]);
if(num!=-1){
curRecord = result[num];
else{
curRecord = {};
// 循环每个json对象中的字段
for(var key in jsonData[idx]){
// 处理转换的数据内容
for(var i=0;i<fromFields.length;i++){
if(key == fromFields[i]){
curRecord[jsonData[idx][toField]+'-' + fromFields[i]] = jsonData[idx][key];
break;
// 除数据内容外,只处理标识字段数据
if(key == idField){
curRecord[key] = jsonData[idx][key];
if(num==-1){
result.push(curRecord);
return result;
function findIdx(jsonData, columnName, value){
for(var idx = 0;idx<jsonData.length;idx++){
if(jsonData[idx][columnName]==value)
return idx;
return -1;
JsTestDriver的测试代码如下:
TestCase("Test json data row to column",{
setUp:function(){
this.jsonData = [{yearmonth:201201,ppq:23,spq:27,company:'dfsoft'},
{yearmonth:201202,ppq:33,spq:38,company:'dfsoft'},
{yearmonth:201203,ppq:43,spq:49,company:'dfsoft'},
{yearmonth:201204,ppq:53,spq:51,company:'dfsoft'},
{yearmonth:201201,ppq:29,spq:26,company:'vcom'},
{yearmonth:201202,ppq:34,spq:38,company:'vcom'},
{yearmonth:201203,ppq:48,spq:43,company:'vcom'},
{yearmonth:201204,ppq:52,spq:59,company:'vcom'}];
var fromField = 'ppq,spq', toField = 'company', idField = 'yearmonth';
this.resultData = CovertData(this.jsonData,idField,fromField, toField);
"test store has columns":function(){
var month1 = this.resultData[findIdx(this.resultData,'yearmonth',201201)];
var month2 = this.resultData[findIdx(this.resultData,'yearmonth',201202)];
var month3 = this.resultData[findIdx(this.resultData,'yearmonth',201203)];
var month4 = this.resultData[findIdx(this.resultData,'yearmonth',201204)];
assertEquals(4,this.resultData.length);
assertEquals('23',month1['dfsoft-ppq']);
assertEquals('29',month1['vcom-ppq']);
assertEquals('33',month2['dfsoft-ppq']);
assertEquals('34',month2['vcom-ppq']);
assertEquals('43',month3['dfsoft-ppq']);
assertEquals('48',month3['vcom-ppq']);
assertEquals('53',month4['dfsoft-ppq']);
assertEquals('52',month4['vcom-ppq']);
assertEquals('27',month1['dfsoft-spq']);
assertEquals('26',month1['vcom-spq']);
assertEquals('38',month2['dfsoft-spq']);
assertEquals('38',month2['vcom-spq']);
assertEquals('49',month3['dfsoft-spq']);
assertEquals('43',month3['vcom-spq']);
assertEquals('51',month4['dfsoft-spq']);
assertEquals('59',month4['vcom-spq']);
测试通过,表示转换成功。
本文介绍的是如何实现json数据可视化,要用到的核心是JSON.stringify这个函数,没想到吧,平时我们只把它用来序列号json数据。
JSON.stringify 函数
将 JavaScript 值转换为 JavaScript 对象表示法 (Json) 字符串。
JSON.stringify(value [, replacer] [, space])
value
必需。 要转换的 JavaScript 值(通常为对象或数组)。
replacer
可选。 用于转换结果的函数或数组。
如果 replacer 为函数,
<span style="background-color:var(--highlight-bg)"><span style="color:var(--highlight-color)"><code class="language-python">
<span style="color:var(--highlight-keyword)">import</span> js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
在开发中,常用到json数据的转换,将json格式的字符串与java对象之间的转换,工具类如下:
import com.fasterxml.jackson.annotation.JsonInclude;
import com.fasterxml.jackson.core.type.TypeReference;
import com.fasterxml.jackson.databind.DeserializationFeature;
import com.fasterxml.jackson.databind.
接受两个列名或表达式作为参数,第一个列名或表达式用作键,第二个列名或表达式用作值,并返回一个包含键-值对的JSON对象。如果结果不包含任何行,或者发生错误,则返回NULL。如果任何键名为NULL或参数数目不等于2,则会发生错误。从MySQL 8.0.14开始,如果存在over_clause子句,这个函数将作为窗口函数执行。简单的的说成人话就是:假设你有两个列,一个是 字段的属性名称,另外一个字段是属性的值,name可以直接吧这两个字段的数据转成json数据返回。
CITYCODE = CityCodeCommon.GetNewCityCode(c.CITY),
oldCityCode = d.CITYCODE,
REGION = CityCodeCommon.GetRegionByCity(c.CITY),
MONITORTIME = d.MONITORTIME
SQL Server2016开始支持JSON数据类型,不仅可以直接输出JSON格式的结果集,还能读取JSON格式的数据。提供了JSONOPEN函数对JSON数据类型进行处理。
最近在写SQL Server的存储过程的时候,遇到了几次参数为JSON字符串。经过查资料和摸索...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title></title>
<scrip...