Добавление спарклайн-диаграммы nvd3 внутри динамической таблицы

Question

Добавление спарклайн-диаграммы nvd3 внутри динамической таблицы

0

Я создаю таблицу "на лету" на основе ответа сервера. В этой ячейке таблицы я добавляю диаграмму искры.

Я не могу сделать эту диаграмму подходящей ячейкой. Я вставил сниппет ниже.

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, который после корректировки добавления к документу, однако диаграмма не изменяется.

ArunDhaJ 20 янв. 2014, в 15:28

Источник

Теги:

jquery

d3.js

html5

nvd3.js

1 ответ

Ещё вопросы

ArunDhaJ · Accepted Answer · 2014-01-21T04-42-00.000Z

Я нашел решение. на этот раз я откладываю вызов 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);
}

с этим я могу решить проблему.

Надеюсь, это поможет кому-то.