我试图用给定的数据渲染折线图。它显示缺少线图的某些部分。代码如下,
function lineChart(){
var pu = [{"power_used":74.77,"capture_at":"2015-12-18T18:00:00","date":"2015-12-18T18:00:00.000Z","snr":74.77},{"power_used":74.68,"capture_at":"2015-12-18T18:05:00","date":"2015-12-18T18:05:00.000Z","snr":74.68},{"power_used":74.52,"capture_at":"2015-12-18T18:10:00","date":"2015-12-18T18:10:00.000Z","snr":74.52},{"power_used":74.69,"capture_at":"2015-12-18T18:15:00","date":"2015-12-18T18:15:00.000Z","snr":74.69},{"power_used":74.7,"capture_at":"2015-12-18T18:20:00","date":"2015-12-18T18:20:00.000Z","snr":74.7},{"power_used":74.66,"capture_at":"2015-12-18T18:25:00","date":"2015-12-18T18:25:00.000Z","snr":74.66},{"power_used":72.78,"capture_at":"2015-12-18T18:30:00","date":"2015-12-18T18:30:00.000Z","snr":72.78},{"power_used":46.56,"capture_at":"2015-12-18T18:35:00","date":"2015-12-18T18:35:00.000Z","snr":46.56},{"power_used":74.77,"capture_at":"2015-12-18T18:40:00","date":"2015-12-18T18:40:00.000Z","snr":74.77},{"power_used":59.22,"capture_at":"2015-12-18T18:45:00","date":"2015-12-18T18:45:00.000Z","snr":59.22},{"power_used":30.14,"capture_at":"2015-12-18T18:50:00","date":"2015-12-18T18:50:00.000Z","snr":30.14},{"power_used":30.24,"capture_at":"2015-12-18T18:55:00","date":"2015-12-18T18:55:00.000Z","snr":30.24},{"power_used":41.83,"capture_at":"2015-12-18T19:00:00","date":"2015-12-18T19:00:00.000Z","snr":41.83},{"power_used":74.92,"capture_at":"2015-12-18T19:05:00","date":"2015-12-18T19:05:00.000Z","snr":74.92},{"power_used":74.64,"capture_at":"2015-12-18T19:10:00","date":"2015-12-18T19:10:00.000Z","snr":74.64},{"power_used":74.74,"capture_at":"2015-12-18T19:15:00","date":"2015-12-18T19:15:00.000Z","snr":74.74},{"power_used":74.75,"capture_at":"2015-12-18T19:20:00","date":"2015-12-18T19:20:00.000Z","snr":74.75},{"power_used":74.66,"capture_at":"2015-12-18T19:25:00","date":"2015-12-18T19:25:00.000Z","snr":74.66},{"power_used":41.06,"capture_at":"2015-12-18T19:30:00","date":"2015-12-18T19:30:00.000Z","snr":41.06},{"power_used":30.36,"capture_at":"2015-12-18T19:35:00","date":"2015-12-18T19:35:00.000Z","snr":30.36},{"power_used":30.28,"capture_at":"2015-12-18T19:40:00","date":"2015-12-18T19:40:00.000Z","snr":30.28},{"power_used":30.22,"capture_at":"2015-12-18T19:45:00","date":"2015-12-18T19:45:00.000Z","snr":30.22},{"power_used":30.24,"capture_at":"2015-12-18T19:50:00","date":"2015-12-18T19:50:00.000Z","snr":30.24},{"power_used":30.22,"capture_at":"2015-12-18T19:55:00","date":"2015-12-18T19:55:00.000Z","snr":30.22},{"power_used":30.2,"capture_at":"2015-12-18T20:00:00","date":"2015-12-18T20:00:00.000Z","snr":30.2}];
var data = pu;
console.log("Actual data"+JSON.stringify(data));
var snr = "power_used";
var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S");
var dateRange = [];
data.forEach(function(d) {
var newdat = new Date(d.capture_at);
//console.log("Date value:::: "+parseDate(newdat));
var datee=parseDate(newdat);
d.date = new Date(datee);
dateRange.push(d.date);
d.snr = d[snr];
console.log("For each " + snr + " " + d[snr]);
});
console.log("snr = " + snr);
var cf = crossfilter(data);
var dimByTime = cf.dimension(function(d) { return d.date;});
var groupForSNR = dimByTime.group().reduceSum(function(d) { return d[snr]; });
var minDate = dimByTime.bottom(1)[0].date;
var maxDate = dimByTime.top(1)[0].date;
var chart = dc.lineChart("#power_used");
chart
.width(450).height(140)
.dimension(dimByTime)
.group(groupForSNR)
.renderDataPoints(true)
.brushOn(false)
.x(d3.time.scale().domain([minDate,maxDate]))
//.y(d3.scale.linear().domain([0,200]).range([0,groupForSNR.all()[0].value]))
.xAxis().ticks(12);
chart.on("renderlet", function (chart) {
chart.selectAll("g.x text")
.attr('dx', '+18')
.attr('transform', "rotate(+30)");
})
chart.render();
}
" power_used"是html div元素的id,它将保存此折线图。
折线图的一部分看起来隐藏在y轴上的〜第50刻度线后面。我可以在开发工具上查看线图上的所有数据点,包括隐藏在屏幕上的数据点。 如果有人有解决方案,这将是一个很大的帮助。