标签：dim name index text 实验 csvdata 可视化 高维 schema
代码原文
<!DOCTYPE html>
<html>
<head>
<title>数据可视化—实验5—高维非空间数据可视化</title>
<meta charset = "utf-8">
<script src = "echarts.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div id="main" style="width:1400px;height:600px;"></div>
<script>
//读取csv文件，准备数据集
d3.csv("time_allocate_day.csv",function(error,csvdata){
if(error){
console.log(error);
}else{
var data = [];
for(let i=0; i<csvdata.length; i++){ //遍历读入的csv文件数据
data.push([
csvdata[i].id,
csvdata[i].place_A,
csvdata[i].place_B,
csvdata[i].place_C,
csvdata[i].place_D,
csvdata[i].place,
csvdata[i].dining,
csvdata[i].service,
csvdata[i].aisle1,
csvdata[i].aisle2,
csvdata[i].stair,
csvdata[i].poster,
csvdata[i].sign,
csvdata[i].rest,
csvdata[i].display,
csvdata[i].room1,
csvdata[i].room2,
csvdata[i].room3,
csvdata[i].room4,
csvdata[i].room5,
csvdata[i].room6
]);
}
console.log(data);
var schema = [ //定义所需的平行坐标轴
{name:'id',index:0,text:'id'},
{name:'place_A',index:1,text:'会场A'},
{name:'place_B',index:2,text:'会场B'},
{name:'place_C',index:3,text:'会场C'},
{name:'place_D',index:4,text:'会场D'},
{name:'place',index:5,text:'主会场'},
{name:'dining',index:6,text:'餐厅'},
{name:'service',index:7,text:'服务台'},
{name:'aisle1',index:8,text:'过道1'},
{name:'axsle2',index:9,text:'过道2'},
{name:'stair',index:10,text:'楼道'},
{name:'poster',index:11,text:'海报区'},
{name:'sign',index:12,text:'签到处'},
{name:'rest',index:13,text:'休息区'},
{name:'display',index:14,text:'展厅'},
{name:'room1',index:15,text:'房间1'},
{name:'room2',index:16,text:'房间2'},
{name:'room3',index:17,text:'房间3'},
{name:'room4',index:18,text:'房间4'},
{name:'room5',index:19,text:'房间5'},
{name:'room6',index:20,text:'房间6'}
];
var myChart = echarts.init(document.getElementById('main'));
var option = {
toolbox:{ //工具栏
show:true,
orient: 'horizontal',
showTitle: true, //鼠标覆盖的时候是否显示工具标题
feature:{ //功能
restore:{show:true}, //展示还原按键功能
dataView:{ //展示数据集
readOnly: true
}
}
},
visualMap:{
show:false, //不显示手柄
color:[
'#00441b',
'#74c476',
]
},
parallelAxis:[ //平行坐标系中的坐标轴配置
//每个坐标轴都有个'dim'属性，表示坐标轴的维度号
{ dim:0,
name: schema[0].text,
type:'category'
},
{dim:1,name: schema[1].text},
{dim:2,name: schema[2].text},
{dim:3,name: schema[3].text},
{dim:4,name: schema[4].text},
{dim:5,name: schema[5].text},
{dim:6,name: schema[6].text},
{dim:7,name: schema[7].text},
{dim:8,name: schema[8].text},
{dim:9,name: schema[9].text},
{dim:10,name: schema[10].text},
{dim:11,name: schema[11].text},
{dim:12,name: schema[12].text},
{dim:13,name: schema[13].text},
{dim:14,name: schema[14].text},
{dim:15,name: schema[15].text},
{dim:16,name: schema[16].text},
{dim:17,name: schema[17].text},
{dim:18,name: schema[18].text},
{dim:19,name: schema[19].text},
{dim:20,name: schema[20].text}
],
parallel:{ //平行坐标系的定义
left:'5%',
right:'13%',
bottom:'10%',
top:'20%',
name:'id',
parallelAxisDefault:{ //配置坐标轴的公有属性
type:'value',
nameLocation: 'end',
nameGap: 20, //坐标轴名称与轴线之间的距离
nameTextStyle:{
fontSize:15,
fontFamily:'宋体',
},
axisLine:{ //坐标轴线样式
lineStyle:{
color:'#555'
}
},
axisLabel:{ //坐标轴刻度标签样式
color:'#000'
},
},
},
series:{
type:'parallel',
data:data,
lineStyle:{ //绘制的图形样式
normal:{
width:1,
opacity:0.5,
color:'#51689b'
}
},
emphasis:{ //鼠标覆盖时线的高亮显示样式
lineStyle:{
color: 'red',
width:2,
},
inactiveOpacity: 0.05, //未被选中的线条会被设置成这个透明度
activeOpacity:2, //被选中的线条会被设置成这个透明度
}
}
};
myChart.setOption(option);
}
});
</script>
</body>
</html>
标签：dim,name,index,text,实验,csvdata,可视化,高维,schema 来源： https://blog.csdn.net/weixin_45918830/article/details/121392750
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。