注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

悠游自在

似水流年,悠游天地,自在我心

 
 
 

日志

 
 
 
 

Echarts + R: 显示一个方阵  

2016-07-13 16:11:42|  分类: IT技术 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
用R处理数据,ECharts显示数据,来显示一个方阵。显示方式如下

R 代码如下:
#将dataframe中的数据输出成json,不要列名字,存到json文件中
AnaUtil.dataframe2json_noname <- function(v,file='temp.json')
{
  tcount=length(v[,1])  #获取数据的总行数
  colnames=names(v)     #获取数据的列名称
  cols=length(v[1,])    #获取数据的列数
 
  tmp=c()
  for(i in 1:tcount)
  {
    tmp2=c()
    for(j in 1:cols)
    {
      if(is.numeric(v[i,j])  && !is.na(v[i,j]))
      {
        tmp3=paste(v[i,j],sep='')  # 数字类型,不用""
      }
      else
      {
        tmp3=paste('\"',v[i,j],'\"',sep='')  # string或其他类型,需要""
      }
      tmp2=c(tmp2,tmp3)
    }
    tmp3=paste(tmp2,collapse = ',\n')
    tmp=c(tmp,tmp3)
  }
  tmp2=paste('[\n',tmp,'\n]',collapse = ',\n',sep='')
  tmp2=paste('{\n\"nodes\":[\n',tmp2,'\n]\n}',sep='')
  Encoding(tmp2) <- 'utf-8'
  cat(tmp2,file=file,sep='')
  return(tmp2)
 
}

#将dataframe中的数据输出成echarts所需的散点图数据格式,存到json文件中
#主要是增加行、列号
AnaUtil.dataframe2nodes_json <- function(v,file='temp.json',noname=F)
{
  #获取数据的总行数
  tcount=length(v[,1])
  #计算图的每行列数
  if(tcount<16){
    cols=4   
  }else{
    cols=as.integer(sqrt(tcount))
  }
  rows=ceiling(tcount/cols)#计算图的行数
 
  i_idx=c(1:tcount)-1
  r_idx=rows+1-floor(i_idx/cols)
  c_idx=(i_idx %% cols)+1
  v=cbind(x=c_idx,y=r_idx,v)
 
  if(noname)
  {
    tmp2=AnaUtil.dataframe2json_noname(v,file=file)
  }
  else{
    tmp2=AnaUtil.dataframe2json(v,file=file)
  }
 
  return(tmp2)
}
利用上述R代码,将需要显示的数据输出到文件“json/temp.json”中,并用文件作为R处理结果与js之间的数据接口。

使用Echarts的js代码如下:
//显示objects
function showObject() {
var dom = document.getElementById("right");
var myChart = echarts.init(dom);
var app = {};

filename='json/temp.json';//'CommunicationRelations.json';
option = null;
myChart.showLoading();
$.getJSON(filename, function (json_data) {
myChart.hideLoading();
loadWO(myChart, app,json_data);
});
}
//将json_data中的数据装载到echarts中
function loadWO(myChart, app,json_data) {
myChart.hideLoading();
app.title = '气泡图';

option = {
title: {
text: '查询结果'
},
xAxis: {
scale: true,
show: false
},
yAxis: {
scale: true,
show: false
},
dataZoom: [
{
type: 'slider',
show: true,
xAxisIndex: [0],
start: 0,
end: 100
},
{
type: 'slider',
show: true,
yAxisIndex: [0],
start: 0,
end: 100
},
{
type: 'inside',
xAxisIndex: [0],
start: 0,
end: 100
},
{
type: 'inside',
yAxisIndex: [0],
start: 0,
end: 100
}
],
series: [{
name: 'result',
data: json_data.nodes,
type: 'scatter',
symbolSize: 30,
label: {
normal: {
show: true,
formatter: function (param) {
return param.data[2];
},
position: 'top'
}
}
}]
};

if (option && typeof option === "object") {
myChart.setOption(option, true);
}

// 处理点击事件并且点击的label名字
myChart.on('click', function (params) {
alert(params.data[2] + 'clicked');
});
}
  评论这张
 
阅读(51)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018