dc.js折线图不显示数据

Question

数据没有显示在我的折线图中。它仅显示y轴和x轴。

我的数据数组如下：

return StreamBuilder<QuerySnapshot>(
      stream: streamQuery,
      builder: ...

我这样设置图表：

time_list = ['00:00:00', '01:00:00', '02:00:00']
 val_list = [0.7274859768018719, 0.6894762867153069, 0.6994151884676558]

我是否错过了<div id="#chart-cpu-performance"></div> <script type="text/javascript"> var cpuperformance = dc.lineChart("#chart-cpu-performance"); var connection = new WebSocket(`ws://localhost:8001/websocket`); function render_plots(dim, val) { cpuperformance .width(990) .height(540) .dimension(dim) .group(val) .x(d3.scaleBand().domain(['00:00:00', '04:00:00', '08:00:00','12:00:00', '16:00:00', '20:00:00','23:00:00']).rangeRound([0,100])) .y(d3.scaleLinear().domain([0,1])) .curve(d3.curveLinear) .renderArea(false) .renderDataPoints(true); cpuperformance.render(); } connection.onmessage = function(event){ //get data and parse var newData = JSON.parse(event.data); var updateObject = [] newData.time_list.forEach(function additem(item, index) { updateObject.push({time: item, avg_value: newData.val_list[index]}) }); var xfilter = crossfilter(updateObject) var timeDim = xfilter.dimension(function(d) {return d.time;}); var avg_vPertime = timeDim.group().reduceSum(function(d) {return +d.avg_value;}); render_plots(timeDim, avg_vPertime) } </script> 函数中cpuperformance的某些参数？

Answer 1

是的，您错过了xUnits。另外，我建议您使用.elasticX(true)而不是自己指定域。

不幸的是，大多数坐标网格图无法自动确定它们要处理的数据键类型，主要的类型是数字，序数和时间。

因此，如果您的数据是顺序的，则需要

.xUnits(dc.units.ordinal)

对于具有序数X刻度的图表，很多逻辑是不同的，并且此参数指示dc.js使用序数逻辑。其他值告诉条形图将数字（dc.units.integers，dc.units.fp.precision）和时间刻度（d3.timeHours等）的条形制作的宽度。

在此示例中，也只有一个数据点与您传递给scaleBand的域匹配。所以你只会看到一点。

更容易使用

.elasticX(true)
.x(d3.scaleBand().rangeRound([0,100]))

，然后让图表找出要放入域中的内容。

Fiddle with a working version of your code。