我对JavaScript和Django相对较新,我正在努力将大数据传递到我的谷歌图表。
我有一张图表代表给定日期和距离的速度。在我的django视图中,我创建了距离,日期和速度列表。我还在那里生成一个列表,其中包含在速度列表中出现的排序值以及一个根据速度值的颜色列表。
我想要一个带有速度贴图的图表,其中应用了colortable,如下所示: http://i.imgur.com/9Tyv8Rn.jpg
所以我使用了速度序列的散点图。该图表是动态的,对于用户选择的每个项目都是不同的。
JS生成行和列:
// Define data table rows:
var rows = [];
var rows_list = [];
var vl_max = vel_list.length;
for (i=0; i < vl_max; i+=1) {
var date_tmp = new Date(date_list[i].split(',')[0],date_list[i].split(',')[1]-1,date_list[i].split(',')[2]);
var date = [date_tmp];
var vel_tmp = vel_list[i];
var vtemp_max = vel_tmp.length;
var tooltip_dsname = dsname_list[i];
var tooltip_track = track_list[i];
for (j=0; j < vtemp_max; j+=1) {
var cell = [{v : date_tmp}];
for (k=0; k < vr_max; k+=1) {
var vel_full = vel_tmp[j];
var vel = vel_full.toFixed(1);
if (vel == vel_range[k]) {
// tooltip:
var dist = dist_list[j]/1000;
var yyyy = date_tmp.getFullYear().toString();
var mm = (date_tmp.getMonth()+1).toString(); // getMonth() is zero-based
var dd = date_tmp.getDate().toString();
var tooltip_date = yyyy + "-" + (mm[1]?mm:"0"+mm[0]) + "-" + (dd[1]?dd:"0"+dd[0]);
var tooltip = "<b>dataset: </b>"+tooltip_dsname+"<br><b>date: </b>"+tooltip_date+"<br><b>track: </b>"+tooltip_track+"<br><b>distance: </b>"+dist+" k"+mapunit+"<br><b> velocity: </b>"+vel_full.toFixed(2)+" m/d";
var color = color_list[k]
var style = "point { shape-type: square; fill-color: "+color+";}"
} else {
var dist = NaN;
var tooltip = "empty" ;
var style = "empty" ;
}
cell.push({v: dist},{v: tooltip},{v:style});
}
rows_list.push({c: cell});
}
};
这是JSfiddle用于生成具有较小数据的图表: http://jsfiddle.net/joannao89/t26ooyrt/2/
我遇到的问题是当图表用于较小的数据时,一旦我想加载它以获得较长的距离和较宽的日期范围,浏览器一直在向我们提出这样一句话:“一个网站正在减慢你的速度浏览器,你想做什么?{stop} {wait}“
我知道这可能是行数过多的问题,我的网站也生成了3个这样的其他图表,具有相同的数据但是在另一个XY轴组合中(例如X轴上的时间,Y上的速度) -axis和距离为系列),它的工作完美。这就是为什么我想以更快的方式将数据传递给图表,但我不知道如何。
我已经尝试使用setTimeout
,但它没有太大变化。我也试过在JS方面少做一些编码,在django视图中做更多,但它也没有帮助。
所以关于如何解决这个问题的任何建议都将非常感谢!