Javascript 避免在Google可视化图表API中绘制两次相同的点
我正在用谷歌的绘制一个折线图,它只是每30分钟改变一次潜在客户的数量(一个整数)。以下是我迄今为止所做的:Javascript 避免在Google可视化图表API中绘制两次相同的点,javascript,json,graph,charts,google-visualization,Javascript,Json,Graph,Charts,Google Visualization,我正在用谷歌的绘制一个折线图,它只是每30分钟改变一次潜在客户的数量(一个整数)。以下是我迄今为止所做的: google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var jsonData = 'json string goes here'; var report = $.parseJSO
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = 'json string goes here';
var report = $.parseJSON(jsonData); //make it a json object
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'Time');
data.addColumn('number', 'Leads');
var interval = 1000 * 60 * 30; //interval of 30mins
var graphData = report['rush_hour_reports'];
var length = graphData.length;
var normalized_data = {}; //placeholder object
for(var i=0; i<length; i++){
var dt = new Date(graphData[i]['my_hour']); //date obj from timestamp
//next we round of time in chunks of 30mins(interval)
var dt_rounded = new Date(Math.round(dt.getTime() / interval) * interval);
//check if that time exits, if yes & sum the new lead count with old one as time is same
// Else, just create a new key with timestamp
if(typeof normalized_data[dt_rounded] == 'undefined'){
normalized_data[dt_rounded] = graphData[i]['lead_count'];
}else{
normalized_data[dt_rounded] += graphData[i]['lead_count'];
}
for(key in normalized_data){
if(normalized_data.hasOwnProperty(key)){
var dt = new Date(key);
var hrs = parseInt(dt.getHours(), 10);
var mins = parseInt(dt.getMinutes(), 10);
//add the data into Google Chart using addRow
data.addRow([ [hrs, mins,0], parseInt(normalized_data[key], 10) ]);
}
}
}
var format = new google.visualization.DateFormat({pattern: 'h:mm a'});
console.log(normalized_data);
data.sort(0); //sort it, just in case its not already sorted
format.format(data, 0);
var options = {
title: 'Company Performance',
fontSize: '12px',
curveType: 'function',
animation:{
duration: 1000,
easing: 'out',
},
pointSize: 5,
hAxis: {title: report.time_format,
titleTextStyle: {color: '#FF0000'}
},
vAxis: {title: 'Leads',
titleTextStyle: {color: '#FF0000'}}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
google.load(“可视化”,“1”,“{packages:[“corechart”]});
setOnLoadCallback(drawChart);
函数绘图图(){
var jsonData='json字符串在这里';
var report=$.parseJSON(jsonData);//将其设置为json对象
var data=new google.visualization.DataTable();
data.addColumn('timeofday','Time');
data.addColumn('number','Leads');
var间隔=1000*60*30;//间隔30分钟
var graphData=报告[“高峰时间报告];
变量长度=graphData.length;
var normalized_data={};//占位符对象
对于(var i=0;i您的问题是您正在将日期对象转换为“timeofday”数据类型,但您没有在timeofday级别聚合数据,因此当您有多天的数据在同一时间段(在您的示例中为12:00)时,您会在该时间获得多个数据点。请尝试以下方法:
for(var i=0; i<length; i++){
var dt = new Date(graphData[i]['my_hour']);
var dt_rounded = new Date(Math.round(dt.getTime() / interval) * interval);
var minutes = (parseInt(dt_rounded.getHours(), 10) * 60) + parseInt(dt_rounded.getMinutes(), 10);
if(typeof normalized_data[minutes] == 'undefined'){
normalized_data[minutes] = graphData[i]['lead_count'];
}else{
normalized_data[minutes] += graphData[i]['lead_count'];
}
}
for(var key in normalized_data){
if(normalized_data.hasOwnProperty(key)){
var hrs = Math.floor(key / 60);
var mins = key % 60;
data.addRow([ [hrs, mins,0], parseInt(normalized_data[key], 10) ]);
}
}
for(var i=0;i)展示一个JSON字符串示例,我来看看。JSON字符串嵌入在这个页面本身()中。没有在这里发布它,hude&会产生很多噪音,这正是我做错的。谢谢,你太棒了!