dc.js - 线图的一部分不可见

时间:2016-01-11 12:24:58

标签: linechart dc.js

我试图用给定的数据渲染折线图。它显示缺少线图的某些部分。代码如下,

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,它将保存此折线图。  
image of clipped line chart

   折线图的一部分看起来隐藏在y轴上的〜第50刻度线后面。我可以在开发工具上查看线图上的所有数据点,包括隐藏在屏幕上的数据点。    如果有人有解决方案,这将是一个很大的帮助。

0 个答案:

没有答案