Question

我根据服务器响应动态创建一个表。在这个表格单元格中，我添加了一个迷你图表。

我无法使此图表适合单元格。我已经粘贴了下面的片段。

function populateTop5Table(top5Obj) {
    var tempTable = jQuery("<table />");

    var tableBody = jQuery("<tbody />")
    jQuery.each(top5Obj, function() {
    jQuery("<tr />")
      .append(
        jQuery("<td />", {
          html : this.current
        })
      )
      .append(
        jQuery("<td />")
        .append(
          jQuery("<div />", {
            "id": "sparkline" + this.id,
            "height": "30px",
            //"width": "200px"
          }
          // Trend Sparkline chart
          ).each(function() {
            loadSparklineChart(this, someParameterRelatedToThisRow)
          })
        )
      ).appendTo(tableBody);
    });

    tableBody.appendTo(tempTable);

    $("#top5Table").empty();
    $("#top5Table").append(tempTable);
}

function loadSparklineChart(chartDiv, someParameterRelatedToThisRow) {
    var sparkChart = nv.models.sparkline()
          // .width(200)
          .height(30)
    var maindiv = d3.select(chartDiv)

    var sparkChartSvg = maindiv.append("svg").attr("height", "30px");

    // for now adding sine series, which I'll later replace by another 
    // ajax call to get chart value, based on someParameterRelatedToThisRow.
    sparkChartSvg.datum(sine())
        .call(sparkChart);

    nv.utils.windowResize(sparkChart.update);
}

因为，即使在将图表添加到文档之前，我也将图表添加到单元格中。 div的初始大小为0x0，在添加到文档后进行调整，但图表不会调整大小。

Answer 1

我找到了解决方案。这次，我推迟了loadSparklineChart调用，直到它被添加到文档中。如下：

...
.append(
  jQuery("<td />")
  .append(
    jQuery("<div />", {
      "id": "sparkline" + this.id,
      "height": "25px",
      "class": "sparlineClass",
      "someParameterRelatedToThisRow" : "value"
    })
  )
)
...

$("#top5Table").empty();
$("#top5Table").append(tempTable);

// Trend Sparkline chart
$("#top5Table .sparlineClass").each(function() {
  loadSparklineChart(this, this.getAttribute("someParameterRelatedToThisRow"))
})

并在loadSparklineChart

中

function loadSparklineChart(chartDiv, someParameterRelatedToThisRow) {
  var divWidth = $(chartDiv).width();
  var sparkChart = nv.models.sparkline()
              .width(divWidth)
              .height(25);

  var maindiv = d3.select(chartDiv);

  var sparkChartSvg = maindiv.append("svg").attr("height", "25px");

  sparkChartSvg.datum(sine())
    .call(sparkChart);

  // I've to call this
  $(chartDiv).parent().width(divWidth);

  nv.utils.windowResize(sparkChart.update);
}

有了这个，我就能解决这个问题。

希望这有助于某人。

在动态表格中添加nvd3迷你图表

1 个答案: