如何创建气泡图
如何创建气泡图
提问于 2019-07-24 19:17:53
假设学生有很多项目，并想上传到网上(系统)的项目。现在，系统希望跟踪或保存该学生项目数量的记录。现在系统给出了学生(用户)项目的全部细节，比如项目上传的时间、日期和月份。这些数据将以图表的形式显示(如气泡图)。
有三个参数
1) Y-axis
include week day's only. days will be constant. It'll not change irrespective of data (like input).
2) X-axis
include months only. months will be constant.It'll not change irrespective of data (like input).
3) Z-axis
include data from database.Data could be anything like number of projects(only digits).假设我是一个学生(用户)，我在一月的星期一上传项目，然后在泡泡图上显示我在一周和哪个月的哪一天上传的项目数量。
它类似于GitHub图表，其中给出了有关用户活动的所有细节。
我不知道从哪里开始。我尝试过各种图表库，如chart.js、highchart.js.
我试过这个。https://jsfiddle.net/h0Lm1jgz/
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Heat Map</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>
<script>
Highcharts.chart('container',
{
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
title: {
text: 'Project Details'
},
xAxis: {
categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
},
yAxis: {
categories: ['Mon','Tue','Wed','Thur','Fri','Sat','Sun'],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
tooltip: {
formatter: function () {
return '<b>' + this.series.xAxis.categories[this.point.x] + ' ' +
this.point.value + '</b> projecys uploaded on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
}
},
series: [{
borderWidth: 1,
data: [
[0, 0, 10],
[0, 1, 19],
[0, 2, 8],
[0, 3, 24],
[0, 4, 67],
[1, 0, 92],
[1, 6, 58],
[1, 2, 78],
[1, 3, 117],
[1, 4, 48],
[2, 0, 35],
[2, 1, 15],
[2, 2, 123],
[2, 3, 64],
[2, 4, 52],
[3, 0, 72],
[3, 1, 132],
[3, 2, 114],
[3, 3, 19],
[3, 4, 16],
[4, 0, 38],
[4, 1, 5],
[4, 2, 8],
[4, 3, 117],
[4, 4, 115],
[5, 0, 88],
[5, 1, 32],
[5, 2, 12],
[5, 3, 6],
[5, 4, 120],
[6, 0, 13],
[6, 1, 44],
[6, 2, 88],
[6, 3, 98],
[6, 4, 96],
[7, 0, 31],
[7, 1, 1],
[7, 2, 82],
[7, 3, 32],
[7, 4, 30],
[8, 0, 85],
[8, 1, 97],
[8, 2, 123],
[8, 3, 64],
[10, 4, 84],
[9, 0, 47],
[9, 1, 114],
[9, 2, 31],
[9, 3, 48],
[11, 4, 91]],
dataLabels: {
enabled: true,
color: '#000000'
}
}]
});
</script>
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2019-07-27 09:08:49
代码
<!-- highcharts library -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div class="container">
<div class="card">
<div class="card-body">
<div id="heap_map_chart" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>
</div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;" id="moreInfo">
</div>
</div>
<script>
$(document).ready(function()
{
requestData();
function requestData()
{
$.ajax(
{
url: '/profile/heap_map_data',
type: 'GET',
success: function(response)
{
console.log(response);
var chart_data = [];
var count = 0;
for(var i = 0, len = response.length; i < len; i++)
{
date_value = response[i].event_start_date;
var d = new Date(date_value);
var year = d.getFullYear();
var month = d.getMonth();
var day = d.getDay();
var actualDay = day -1;
chart_data.push([month,actualDay,response[i].user_id]);
}
console.log("chart_data ==",chart_data);
Highcharts.chart('heap_map_chart',
{
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1,
},
title: {
text: 'Project Details'
},
xAxis: {
categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
},
yAxis: {
categories: ['Mon','Tue','Wed','Thur','Fri','Sat','Sun'],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
symbolHeight: 280
},
tooltip: {
formatter: function ()
{
return + this.point.value + ' <b> project was uploaded on ' + this.series.xAxis.categories[this.point.x] + ' date, 2019' + '<br /> click to view more' ;
}
},
plotOptions:
{
series:
{
cursor: 'pointer',
point:
{
events:
{
click: function ()
{
var year = 2019;
var month = this.x;
var y_axis_day = this.y;
$.ajax(
{
url: '/profile/heap_map_event_details',
type: "POST",
data: {year:year,month:month},
success: function (response)
{
var $message_list= document.getElementById("moreInfo");
$message_list.innerHTML = '';
for(var i = 0, len = response.length; i < len; i++)
{
var date = new Date(response[i].event_start_date);
var day = date.getDay();
var actualDay = day -1;
actualDay = Number(actualDay)
if(y_axis_day == actualDay)
{
$message_list.innerHTML = $message_list.innerHTML + `<div class="card online_user" ><li class="list-group-item link-class" style="cursor: pointer;"> <div class="d-flex bd-highlight"> <div class="img_cont"><img src="../public/image/${response[i].e_imagepath}" class="rounded-circle user_img"><span class="online_icon offline"></span> </div><div class="user_info">${response[i].event_name}}<br/><small style="color:#F44336"><strong>${response[i].event_start_date} message</strong></small><br/><small>Last seen <small>${response[i].event_end_date}</small></small></div> </div> </li></div>`;
}
}
},
error : function(jqXHR, textStatus, errorThrown)
{
console.log('jqXHR:');
console.log(jqXHR);
console.log('textStatus:');
console.log(textStatus);
console.log('errorThrown:');
console.log(errorThrown);
alert(errorThrown);
}
});
}
}
}
}
},
series: [
{
data: chart_data,
borderWidth: 1,
dataLabels: {
enabled: true,
color: '#000000'
}
}]
});
},
error : function(jqXHR, textStatus, errorThrown)
{
console.log('jqXHR:');
console.log(jqXHR);
console.log('textStatus:');
console.log(textStatus);
console.log('errorThrown:');
console.log(errorThrown);
alert(errorThrown);
}
});
}
})
</script>API接口
router.get('/profile/heap_map_data', function(req,res)
{
console.log("No. of time being called 1")
const user_id = req.session.user_id;
Posts.findAll()
.then((data)=>
{
res.send(data);
})
.catch((err)=>
{
res.send(err);
})
})
router.post('/profile/heap_map_event_details', function(req,res)
{
const year = Number(req.body.year);
var month = Number(req.body.month);
month = month + 1;
if(month < 10)
{
month = "0"+month;
}
Posts.findAll({where:{event_start_date:{[Op.endsWith]: '%' + "2019-"+month+"-" +'%'}}})
.then((data)=>
{
console.log(data);
res.send(data);
})
.catch((err)=>
{
res.send(err);
})
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57189838
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号