我的问题图片：http://hpics.li/c012dca
这是一张“实时”图表。它从数据库和数据中获取数据。画出来。我修改了x.domain以便只有30秒的捕获时间。
但我在Y轴上有溢出。
这是我的代码：
$(document).ready(function(){
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 1000 - margin.left - margin.right,
height = 380 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;
var formatTime = d3.time.format("%H:%M:%S");
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(d3.time.format("%H:%M:%S"))
.ticks(5);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5);
var line = d3.svg.line()
.interpolate('linear')
.x(function(d) { return x(d.timestamp); })
.y(function(d) { return y(d.value); })
;
var svg = d3.select("#graphbpm").append("svg")
.attr("width", width)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.json("./data.php", function(error,data) {
data.forEach(function(d) {
d.timestamp = d.timestamp;
d.value = +d.value;
});
x.domain([d3.max(data, function(d) { return d.timestamp; })-30000,d3.max(data, function(d) { return d.timestamp; })]);
y.domain([0,d3.max(data, function(d) { return d.value; })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("x", 500 )
.attr("y", -5 )
.style("text-anchor", "middle")
.text("(TIME)");
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("(LIVE)");
svg.append("path")
.attr("class","line")
.attr("d",line(data))
;
var pathl = svg.append("g")
.attr("clip-path", "url(#clip)")
.append("path")
.data(data)
.attr("class", "line")
.attr("fill","pink");
var inter = setInterval(function() {
updateData();
}, 2000);
});
function updateData()
{
d3.json("./data.php", function(data) {
data.forEach(function(d) {
d.timestamp = d.timestamp;
d.value = +d.value;
});
data.push(data);
x.domain([d3.max(data, function(d) { return d.timestamp; })-30000,d3.max(data, function(d) { return d.timestamp; })]);
y.domain([0,d3.max(data, function(d) { return d.value; })]);
svg.select("path.line")
.attr("d", line(data))
.transition();
svg.select(".x.axis")
.transition()
.duration(750)
.ease("linear")
.call(xAxis);
svg.select(".y.axis")
.transition()
.duration(750)
.ease("linear")
.call(yAxis);
svg.select("pathl")
.transition()
.duration(750)
.ease("linear")
.attr("transform", "translate(" + x(0) + ")");
svg.select("dot")
.transition()
.duration(750)
.ease("linear")
.attr("transform", "translate(" + x(0) + ")");
data.shift();
});
};
f
});#graphbpm {
background-color:#fff;
width:600px;
height:450px;
}
#graphgsr {
background-color:#fff;
width:600px;
height:450px;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
text {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:12px;
fill:#9b9b9b;
}<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Dashboard</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="graphbpm">
</div>
<div id="graphgsr">
</div>
<script src="js/jquery-2.1.3.js"></script>
<script type="text/javascript" src="js/d3.min.js"></script>
<script type="text/javascript" src="js/basic.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
我修改此行时出现错误：
x.domain([d3.max(data, function(d) { return d.timestamp; })-30000,d3.max(data, function(d) { return d.timestamp; })]);
在updateData（）＆amp;初始化。
答案 0 :(得分：0)
var inter;
var gData = JSON.parse( d3.select("pre#data").text() );
gData.forEach(function(d) {
d.timestamp = d.timestamp;
d.value = +d.value;
});
gData.sort(function(a, b){ return a.timestamp < b.timestamp; });
var startDate = d3.min(gData, function(d){ return d.timestamp;});
var endDate = d3.max(gData, function(d) { return d.timestamp; });
var startVal = 0;
gData.forEach(function(d){
if(startDate == d.timestamp){
startVal = d.value;
}
});
var counter=1;
$(document).ready(function(){
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 1000 - margin.left - margin.right,
height = 380 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;
var formatTime = d3.time.format("%H:%M:%S");
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.tickFormat(d3.time.format("%H:%M:%S"))
.ticks(5);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5);
var line = d3.svg.line()
.interpolate('linear')
.x(function(d) {
return x(d.timestamp);
})
.y(function(d) {
return y(d.value);
});
var svg = d3.select("#graphbpm").append("svg")
.attr("width", width)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
/*var data = JSON.parse( d3.select("pre#data").text() );
data.forEach(function(d) {
d.timestamp = d.timestamp;
d.value = +d.value;
});*/
var data = [];
for(var i=0; i<gData.length; i++){
if(parseInt(gData[i].timestamp) <= (parseInt(startDate)+120000)){
data.push(gData[i]);
}
}
//x.domain([d3.max(data, function(d) { return d.timestamp; })-30000,d3.max(data, function(d) { return d.timestamp; })]);
x.domain([d3.min(data, function(d){
return d.timestamp;
}), d3.max(data, function(d){
return d.timestamp;
})]
);
console.log(d3.min(data, function(d){ return d.timestamp;}));
console.log(d3.max(data, function(d){ return d.timestamp;}));
y.domain([0,d3.max(data, function(d) { return d.value; })]);
startDate = d3.max(data, function(d) { return d.timestamp; });
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("x", 500 )
.attr("y", -5 )
.style("text-anchor", "middle")
.text("(TIME)");
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("(LIVE)");
svg.append("path")
.attr("class","line")
.attr("d",line(data))
;
var pathl = svg.append("g")
.attr("clip-path", "url(#clip)")
.append("path")
.data(data)
.attr("class", "line")
.attr("fill","pink");
console.log("start Date"+(new Date(parseInt(startDate))));
inter = setInterval(function() {
updateData(counter);counter++;
if(startDate == endDate){
clearInterval(inter);
}
}, 2000);
//});
function updateData(iL)
{
var data = [];
for(var i=0; i<gData.length; i++){
if(gData[i].timestamp > (startDate) && gData[i].timestamp <= (parseInt(startDate)+(60000*4))){
data.push(gData[i]);
}
}
if(data.length ==0){
data.push({"timestamp":startDate, "value":startVal}, {"timestamp": parseInt(startDate)+(60000*2) , "value": startVal});
startDate = d3.max(data, function(d) { return d.timestamp; });
}else {
startDate = d3.max(data, function(d) { return d.timestamp; });
}
data.forEach(function(d){
if(startDate == d.timestamp){
startVal = d.value;
}
});
//data.push(data);
x.domain([d3.min(data, function(d) { return d.timestamp; }),d3.max(data, function(d) { return d.timestamp; })]);
y.domain([0,d3.max(data, function(d) { return d.value; })]);
svg.select("path.line")
.attr("d", line(data))
.transition();
svg.select(".x.axis")
.transition()
.duration(750)
.ease("linear")
.call(xAxis);
svg.select(".y.axis")
.transition()
.duration(750)
.ease("linear")
.call(yAxis);
svg.select("pathl")
.transition()
.duration(750)
.ease("linear")
.attr("transform", "translate(" + x(0) + ")");
svg.select("dot")
.transition()
.duration(750)
.ease("linear")
.attr("transform", "translate(" + x(0) + ")");
data.shift();
}
});#graphbpm {
background-color:#fff;
width:600px;
height:450px;
}
#graphgsr {
background-color:#fff;
width:600px;
height:450px;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
text {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:12px;
fill:#9b9b9b;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="graphbpm"></div>
<div id="graphgsr"></div>
<pre id="data">
[{"timestamp":"1430905215360","value":"87"},{"timestamp":"1430905217837","value":"76"},{"timestamp":"1430905220828","value":"61"},{"timestamp":"1430905223955","value":"60"},{"timestamp":"1430905227003","value":"62"},{"timestamp":"1430905229813","value":"66"},{"timestamp":"1430905233249","value":"55"},{"timestamp":"1430905236108","value":"67"},{"timestamp":"1430905238666","value":"78"},{"timestamp":"1430905241466","value":"67"},{"timestamp":"1430905244487","value":"62"},{"timestamp":"1430905247404","value":"67"},{"timestamp":"1430905250050","value":"72"},{"timestamp":"1430905253014","value":"63"},{"timestamp":"1430905255882","value":"68"},{"timestamp":"1430905258931","value":"61"},{"timestamp":"1430905261858","value":"64"},{"timestamp":"1430905264939","value":"59"},{"timestamp":"1430905268152","value":"61"},{"timestamp":"1430905270874","value":"72"},{"timestamp":"1430905273838","value":"65"},{"timestamp":"1430905276556","value":"71"},{"timestamp":"1430905278844","value":"87"},{"timestamp":"1430905281061","value":"86"},{"timestamp":"1430905283241","value":"91"},{"timestamp":"1430905285635","value":"79"},{"timestamp":"1430905288256","value":"73"},{"timestamp":"1430905291006","value":"65"},{"timestamp":"1430905294219","value":"57"},{"timestamp":"1430905297337","value":"58"},{"timestamp":"1430905300519","value":"60"},{"timestamp":"1430905303519","value":"62"},{"timestamp":"1430905306895","value":"56"},{"timestamp":"1430905309839","value":"64"},{"timestamp":"1430905312477","value":"73"},{"timestamp":"1430905314887","value":"78"},{"timestamp":"1430905317846","value":"64"},{"timestamp":"1430905320665","value":"67"},{"timestamp":"1430905323219","value":"73"},{"timestamp":"1430905325868","value":"70"},{"timestamp":"1430905329035","value":"60"},{"timestamp":"1430905332000","value":"68"},{"timestamp":"1430905674552","value":"78"},{"timestamp":"1430905680627","value":"60"},{"timestamp":"1430905683670","value":"61"},{"timestamp":"1430905686705","value":"63"},{"timestamp":"1430905747024","value":"61"},{"timestamp":"1430905750008","value":"62"},{"timestamp":"1430905753084","value":"63"},{"timestamp":"1430905756262","value":"59"},{"timestamp":"1430905759329","value":"62"},{"timestamp":"1430905762285","value":"65"},{"timestamp":"1430905765359","value":"64"},{"timestamp":"1430905768121","value":"68"},{"timestamp":"1430905770997","value":"66"},{"timestamp":"1430905773700","value":"70"},{"timestamp":"1430905776488","value":"69"},{"timestamp":"1430905779534","value":"58"},{"timestamp":"1430905782567","value":"61"},{"timestamp":"1430905785501","value":"66"},{"timestamp":"1430905788628","value":"58"},{"timestamp":"1430905791501","value":"70"},{"timestamp":"1430905793939","value":"79"},{"timestamp":"1430905796838","value":"63"},{"timestamp":"1430905799645","value":"65"},{"timestamp":"1430905802711","value":"60"},{"timestamp":"1430905805721","value":"64"},{"timestamp":"1430905808205","value":"77"},{"timestamp":"1430905810658","value":"78"},{"timestamp":"1430905813384","value":"69"},{"timestamp":"1430905816217","value":"69"},{"timestamp":"1430905818956","value":"69"},{"timestamp":"1430905821952","value":"60"},{"timestamp":"1430905825013","value":"62"},{"timestamp":"1430905828056","value":"62"},{"timestamp":"1430905830800","value":"66"},{"timestamp":"1430905833922","value":"58"},{"timestamp":"1430905836851","value":"64"},{"timestamp":"1430905839824","value":"64"},{"timestamp":"1430905843068","value":"60"},{"timestamp":"1430905846152","value":"60"},{"timestamp":"1430905849483","value":"57"},{"timestamp":"1430905852694","value":"59"},{"timestamp":"1430905855724","value":"65"},{"timestamp":"1430905858550","value":"66"},{"timestamp":"1430905861835","value":"58"},{"timestamp":"1430905864880","value":"66"},{"timestamp":"1430905867771","value":"65"},{"timestamp":"1430905870712","value":"59"},{"timestamp":"1430905873832","value":"61"},{"timestamp":"1430905876485","value":"69"},{"timestamp":"1430905879488","value":"59"},{"timestamp":"1430905882638","value":"59"},{"timestamp":"1430905885541","value":"63"},{"timestamp":"1430905888351","value":"65"},{"timestamp":"1430905891408","value":"60"},{"timestamp":"1430905894403","value":"62"},{"timestamp":"1430905897225","value":"64"},{"timestamp":"1430905900164","value":"62"},{"timestamp":"1430905902896","value":"67"},{"timestamp":"1430905905521","value":"73"},{"timestamp":"1430905908258","value":"65"},{"timestamp":"1430905911363","value":"61"},{"timestamp":"1430905914332","value":"64"},{"timestamp":"1430905917380","value":"61"},{"timestamp":"1430905920594","value":"57"},{"timestamp":"1430905923542","value":"67"},{"timestamp":"1430905926348","value":"65"},{"timestamp":"1430905929409","value":"60"},{"timestamp":"1430905932378","value":"66"},{"timestamp":"1430905935167","value":"67"},{"timestamp":"1430905937780","value":"70"},{"timestamp":"1430905940252","value":"79"},{"timestamp":"1430905942769","value":"75"},{"timestamp":"1430905945241","value":"74"},{"timestamp":"1430905947848","value":"68"},{"timestamp":"1430905950881","value":"61"},{"timestamp":"1430905953914","value":"61"},{"timestamp":"1430905956895","value":"63"},{"timestamp":"1430905960048","value":"61"},{"timestamp":"1430905962822","value":"72"},{"timestamp":"1430905965754","value":"62"},{"timestamp":"1430906222968","value":"71"},{"timestamp":"1430906225549","value":"72"},{"timestamp":"1430906228296","value":"66"},{"timestamp":"1430906230917","value":"71"},{"timestamp":"1430906233641","value":"66"},{"timestamp":"1430906236789","value":"59"},{"timestamp":"1430906239491","value":"69"},{"timestamp":"1430906243151","value":"70"},{"timestamp":"1430906245957","value":"63"},{"timestamp":"1430906249093","value":"61"},{"timestamp":"1430906252057","value":"61"},{"timestamp":"1430906255158","value":"60"},{"timestamp":"1430906257521","value":"62"},{"timestamp":"1430906260349","value":"64"},{"timestamp":"1430906263328","value":"62"},{"timestamp":"1430906266309","value":"62"},{"timestamp":"1430906269364","value":"60"},{"timestamp":"1430906271556","value":"62"},{"timestamp":"1430906274341","value":"67"},{"timestamp":"1430906277292","value":"62"},{"timestamp":"1430906280221","value":"63"},{"timestamp":"1430906283202","value":"63"},{"timestamp":"1430906285472","value":"64"},{"timestamp":"1430906288192","value":"70"},{"timestamp":"1430906290677","value":"77"},{"timestamp":"1430906293274","value":"72"},{"timestamp":"1430906295898","value":"73"},{"timestamp":"1430906300472","value":"68"},{"timestamp":"1430906303269","value":"67"},{"timestamp":"1430906305067","value":"113"},{"timestamp":"1430906307264","value":"86"},{"timestamp":"1430906309602","value":"78"},{"timestamp":"1430906311991","value":"81"},{"timestamp":"1430906313530","value":"85"},{"timestamp":"1430906315505","value":"98"},{"timestamp":"1430906317412","value":"97"},{"timestamp":"1430906320445","value":"62"},{"timestamp":"1430906323540","value":"59"},{"timestamp":"1430906326591","value":"61"},{"timestamp":"1430906328419","value":"72"},{"timestamp":"1430906331061","value":"69"},{"timestamp":"1430906333969","value":"63"},{"timestamp":"1430906337035","value":"61"},{"timestamp":"1430906339821","value":"67"},{"timestamp":"1430906342011","value":"66"},{"timestamp":"1430906345047","value":"61"},{"timestamp":"1430906348087","value":"62"},{"timestamp":"1430906351045","value":"64"},{"timestamp":"1430906354078","value":"60"},{"timestamp":"1430906356317","value":"68"},{"timestamp":"1430907122190","value":"80"},{"timestamp":"1430907124783","value":"67"},{"timestamp":"1430907127963","value":"60"},{"timestamp":"1430907131154","value":"60"},{"timestamp":"1430907133724","value":"57"},{"timestamp":"1430907136900","value":"61"},{"timestamp":"1430907180957","value":"88"},{"timestamp":"1430907184215","value":"53"},{"timestamp":"1430907187382","value":"65"},{"timestamp":"1430907190050","value":"70"},{"timestamp":"1430907193108","value":"62"},{"timestamp":"1430907195569","value":"80"},{"timestamp":"1430907198297","value":"65"},{"timestamp":"1430907201292","value":"63"},{"timestamp":"1430907203759","value":"78"},{"timestamp":"1430907206532","value":"65"},{"timestamp":"1430907209446","value":"66"},{"timestamp":"1430907212441","value":"63"},{"timestamp":"1430907215168","value":"69"},{"timestamp":"1430907218275","value":"62"},{"timestamp":"1430907221436","value":"59"},{"timestamp":"1430907224451","value":"61"},{"timestamp":"1430907227410","value":"67"},{"timestamp":"1430907230349","value":"62"},{"timestamp":"1430907233621","value":"57"},{"timestamp":"1430907236694","value":"61"},{"timestamp":"1430907239606","value":"65"},{"timestamp":"1430907242678","value":"60"},{"timestamp":"1430907245865","value":"60"},{"timestamp":"1430907248940","value":"59"},{"timestamp":"1430907252013","value":"62"},{"timestamp":"1430907255064","value":"60"},{"timestamp":"1430907257999","value":"64"},{"timestamp":"1430907260767","value":"69"},{"timestamp":"1430907263452","value":"69"},{"timestamp":"1430907266105","value":"72"},{"timestamp":"1430907268849","value":"66"},{"timestamp":"1430907271699","value":"65"},{"timestamp":"1430907274461","value":"67"},{"timestamp":"1430907277235","value":"67"},{"timestamp":"1430907280191","value":"63"},{"timestamp":"1430907283269","value":"61"},{"timestamp":"1430907286200","value":"64"},{"timestamp":"1430907289102","value":"66"},{"timestamp":"1430907291462","value":"83"},{"timestamp":"1430907293543","value":"91"},{"timestamp":"1430907296314","value":"61"},{"timestamp":"1430907298297","value":"96"},{"timestamp":"1430907575667","value":"76"},{"timestamp":"1430907578737","value":"61"},{"timestamp":"1430907581605","value":"64"},{"timestamp":"1430907584730","value":"61"},{"timestamp":"1430907587764","value":"61"},{"timestamp":"1430907590894","value":"60"},{"timestamp":"1430907594133","value":"57"},{"timestamp":"1430907597306","value":"61"},{"timestamp":"1430907600268","value":"62"},{"timestamp":"1430907606496","value":"61"},{"timestamp":"1430907609275","value":"69"},{"timestamp":"1430907611747","value":"80"},{"timestamp":"1430907614516","value":"65"},{"timestamp":"1430907617276","value":"69"},{"timestamp":"1430907619837","value":"74"},{"timestamp":"1430907622548","value":"67"},{"timestamp":"1430907625557","value":"59"},{"timestamp":"1430907628773","value":"58"},{"timestamp":"1430907631774","value":"63"},{"timestamp":"1430907634749","value":"60"},{"timestamp":"1430907637759","value":"62"},{"timestamp":"1430907640548","value":"68"},{"timestamp":"1430907643199","value":"70"},{"timestamp":"1430907644821","value":"78"},{"timestamp":"1430907647348","value":"74"},{"timestamp":"1430907650083","value":"72"},{"timestamp":"1430907652826","value":"67"},{"timestamp":"1430907655901","value":"62"},{"timestamp":"1430907658773","value":"66"},{"timestamp":"1430907661828","value":"64"},{"timestamp":"1430907663898","value":"125"},{"timestamp":"1430907666855","value":"63"},{"timestamp":"1430907669750","value":"64"},{"timestamp":"1430907672714","value":"62"},{"timestamp":"1430907675671","value":"61"},{"timestamp":"1430907678629","value":"61"},{"timestamp":"1430907681396","value":"69"},{"timestamp":"1430907684298","value":"64"},{"timestamp":"1430907687112","value":"69"},{"timestamp":"1430907689529","value":"80"},{"timestamp":"1430907691954","value":"77"},{"timestamp":"1430907694731","value":"67"},{"timestamp":"1430907697311","value":"73"},{"timestamp":"1430907699741","value":"76"},{"timestamp":"1430907702503","value":"66"},{"timestamp":"1430907705435","value":"63"},{"timestamp":"1430907708387","value":"64"},{"timestamp":"1430907711212","value":"66"},{"timestamp":"1430907714007","value":"68"},{"timestamp":"1430907715815","value":"140"},{"timestamp":"1430907718331","value":"74"},{"timestamp":"1430912520403","value":"102"},{"timestamp":"1430912522217","value":"104"},{"timestamp":"1430912524079","value":"106"},{"timestamp":"1430912525843","value":"108"},{"timestamp":"1430912527630","value":"110"},{"timestamp":"1430912529372","value":"106"},{"timestamp":"1430912531300","value":"96"},{"timestamp":"1430912533142","value":"104"},{"timestamp":"1430912534964","value":"109"},{"timestamp":"1430912536721","value":"110"},{"timestamp":"1430912538410","value":"112"},{"timestamp":"1430912540112","value":"114"},{"timestamp":"1430912541808","value":"112"},{"timestamp":"1430912543553","value":"109"},{"timestamp":"1430912545254","value":"110"},{"timestamp":"1430912547056","value":"107"},{"timestamp":"1430912548884","value":"103"},{"timestamp":"1430912550737","value":"104"},{"timestamp":"1430912552505","value":"106"},{"timestamp":"1430912554413","value":"99"},{"timestamp":"1430912556396","value":"96"},{"timestamp":"1430912558320","value":"99"},{"timestamp":"1430912560236","value":"100"},{"timestamp":"1430912564005","value":"102"},{"timestamp":"1430912565828","value":"106"},{"timestamp":"1430912567703","value":"103"},{"timestamp":"1430912569570","value":"101"},{"timestamp":"1430912571454","value":"101"},{"timestamp":"1430912573332","value":"103"},{"timestamp":"1430912575163","value":"104"},{"timestamp":"1430912577066","value":"101"},{"timestamp":"1430912578964","value":"100"},{"timestamp":"1430912580965","value":"97"},{"timestamp":"1430912582885","value":"101"},{"timestamp":"1430912584662","value":"105"},{"timestamp":"1430912587661","value":"78"},{"timestamp":"1430912589353","value":"107"},{"timestamp":"1430912591090","value":"111"},{"timestamp":"1430912592891","value":"111"},{"timestamp":"1430912594620","value":"111"},{"timestamp":"1430912596379","value":"108"},{"timestamp":"1430912598104","value":"114"},{"timestamp":"1430912599904","value":"113"},{"timestamp":"1430912601615","value":"110"},{"timestamp":"1430912603340","value":"109"},{"timestamp":"1430912605085","value":"110"},{"timestamp":"1430912606913","value":"111"},{"timestamp":"1430912608619","value":"113"},{"timestamp":"1430912610332","value":"109"},{"timestamp":"1430912612144","value":"104"},{"timestamp":"1430912614033","value":"104"},{"timestamp":"1430912615890","value":"103"},{"timestamp":"1430912617700","value":"105"},{"timestamp":"1430912619600","value":"102"},{"timestamp":"1430912621432","value":"104"},{"timestamp":"1430912623259","value":"103"},{"timestamp":"1430912625132","value":"101"},{"timestamp":"1430912627051","value":"100"},{"timestamp":"1430912628929","value":"102"},{"timestamp":"1430912630772","value":"103"},{"timestamp":"1430912632642","value":"103"},{"timestamp":"1430912636351","value":"102"},{"timestamp":"1430912638210","value":"102"},{"timestamp":"1430912640156","value":"104"},{"timestamp":"1430912641945","value":"108"},{"timestamp":"1430912643653","value":"115"},{"timestamp":"1430912645448","value":"113"},{"timestamp":"1430912647265","value":"104"},{"timestamp":"1430912649102","value":"104"},{"timestamp":"1430912650909","value":"107"},{"timestamp":"1430912652767","value":"109"},{"timestamp":"1430912654511","value":"109"},{"timestamp":"1430912656341","value":"104"},{"timestamp":"1430912658178","value":"102"},{"timestamp":"1430912660081","value":"101"},{"timestamp":"1430912661981","value":"99"},{"timestamp":"1430912663857","value":"101"},{"timestamp":"1430912665819","value":"98"},{"timestamp":"1430912667776","value":"97"},{"timestamp":"1430912669677","value":"99"},{"timestamp":"1430912671351","value":"127"},{"timestamp":"1430912672810","value":"105"},{"timestamp":"1430912674621","value":"103"},{"timestamp":"1430912676506","value":"100"},{"timestamp":"1430912678568","value":"90"},{"timestamp":"1430912680024","value":"171"},{"timestamp":"1430912681986","value":"93"},{"timestamp":"1430912683949","value":"96"},{"timestamp":"1430912685927","value":"96"},{"timestamp":"1430912687876","value":"97"},{"timestamp":"1430912689841","value":"95"},{"timestamp":"1430912691844","value":"96"},{"timestamp":"1430912693794","value":"97"},{"timestamp":"1430912695698","value":"98"},{"timestamp":"1430912697627","value":"99"},{"timestamp":"1430912699548","value":"98"},{"timestamp":"1430912701446","value":"98"},{"timestamp":"1430912703368","value":"98"},{"timestamp":"1430912705265","value":"101"},{"timestamp":"1430912707105","value":"102"},{"timestamp":"1430912708965","value":"103"},{"timestamp":"1430912710827","value":"104"},{"timestamp":"1430912712632","value":"104"},{"timestamp":"1430912714481","value":"101"},{"timestamp":"1430912716417","value":"97"},{"timestamp":"1430912718398","value":"97"},{"timestamp":"1430912720285","value":"101"},{"timestamp":"1430912722116","value":"103"},{"timestamp":"1430912724030","value":"100"},{"timestamp":"1430912725935","value":"98"},{"timestamp":"1430912727870","value":"101"},{"timestamp":"1430912729717","value":"103"},{"timestamp":"1430912731538","value":"103"},{"timestamp":"1430912733398","value":"100"},{"timestamp":"1430912735278","value":"101"},{"timestamp":"1430912737190","value":"104"},{"timestamp":"1430912738974","value":"105"},{"timestamp":"1430912740827","value":"102"},{"timestamp":"1430912742758","value":"100"},{"timestamp":"1430912744644","value":"100"},{"timestamp":"1430912746546","value":"100"},{"timestamp":"1430912748436","value":"100"},{"timestamp":"1430912750298","value":"104"},{"timestamp":"1430912752083","value":"105"},{"timestamp":"1430912755191","value":"96"},{"timestamp":"1430912757143","value":"99"},{"timestamp":"1430912758991","value":"103"},{"timestamp":"1430912760778","value":"105"},{"timestamp":"1430912762674","value":"99"},{"timestamp":"1430912764722","value":"91"},{"timestamp":"1430912766733","value":"96"},{"timestamp":"1430912767875","value":"104"},{"timestamp":"1430912769701","value":"109"},{"timestamp":"1430912771388","value":"115"},{"timestamp":"1430912773091","value":"112"},{"timestamp":"1430912774824","value":"111"},{"timestamp":"1430912776630","value":"105"},{"timestamp":"1430912778443","value":"106"},{"timestamp":"1430912780299","value":"102"},{"timestamp":"1430912783191","value":"114"},{"timestamp":"1430912785089","value":"100"},{"timestamp":"1430912787017","value":"100"},{"timestamp":"1430912788930","value":"102"},{"timestamp":"1430912790806","value":"103"},{"timestamp":"1430912792649","value":"105"},{"timestamp":"1430912794490","value":"104"},{"timestamp":"1430912797644","value":"103"},{"timestamp":"1430912799616","value":"98"},{"timestamp":"1430912801504","value":"102"},{"timestamp":"1430912803392","value":"99"},{"timestamp":"1430912805372","value":"95"},{"timestamp":"1430912807350","value":"96"},{"timestamp":"1430912809272","value":"99"},{"timestamp":"1430912812075","value":"100"},{"timestamp":"1430912814066","value":"95"},{"timestamp":"1430912816167","value":"96"},{"timestamp":"1430912818087","value":"100"},{"timestamp":"1430912819999","value":"98"},{"timestamp":"1430912821941","value":"100"},{"timestamp":"1430912823845","value":"100"},{"timestamp":"1430912826963","value":"95"},{"timestamp":"1430912828985","value":"96"},{"timestamp":"1430912830967","value":"97"},{"timestamp":"1430912832935","value":"96"},{"timestamp":"1430912834941","value":"99"},{"timestamp":"1430912836878","value":"97"},{"timestamp":"1430912838929","value":"94"},{"timestamp":"1430912839922","value":"93"},{"timestamp":"1430912841944","value":"97"},{"timestamp":"1430912843811","value":"101"},{"timestamp":"1430912845685","value":"101"},{"timestamp":"1430912847617","value":"99"},{"timestamp":"1430912849549","value":"99"},{"timestamp":"1430912851446","value":"97"},{"timestamp":"1430912853109","value":"116"},{"timestamp":"1430912853992","value":"114"},{"timestamp":"1430912855596","value":"110"},{"timestamp":"1430912857263","value":"114"},{"timestamp":"1430912858917","value":"115"},{"timestamp":"1430912860606","value":"117"},{"timestamp":"1430912862272","value":"113"},{"timestamp":"1430912863959","value":"112"},{"timestamp":"1430912865716","value":"111"},{"timestamp":"1430913095754","value":"90"},{"timestamp":"1430913097826","value":"92"},{"timestamp":"1430913099959","value":"86"},{"timestamp":"1430913102263","value":"82"},{"timestamp":"1430913104611","value":"81"},{"timestamp":"1430913106852","value":"85"},{"timestamp":"1430913109104","value":"82"},{"timestamp":"1430913111607","value":"74"},{"timestamp":"1430913114096","value":"81"},{"timestamp":"1430913116295","value":"87"},{"timestamp":"1430913118751","value":"73"},{"timestamp":"1430913120831","value":"95"},{"timestamp":"1430913122761","value":"99"},{"timestamp":"1430913124880","value":"85"},{"timestamp":"1430913127166","value":"83"}]
</pre>
做了很多锻炼之后。 我想最后我满足了你的要求。 所有这些天我们都在考虑为什么它不会更新和获取错误，这都是因为数据。 我们希望以30秒的刻度显示比例，因为我们需要用5分钟更新比例2分钟，但你的数据是这样的 将其更改为日期后，时间戳为
gData.forEach(function(d){console.log(new Date(parseInt(d.timestamp))); });
运行上面的代码然后你就会知道时间差距。
时间从15:11:21到17:22:07 介于两者之间，请参阅数据不可用。 15:12:12到15:17:54 差距很大， 请仔细观察我的代码，看看我是如何处理数据不可用的。
希望你明白。如果没有问我更多。 好