NVD3：将“total”值添加到stackedAreaChart 的interactiveGuideline答案

【问题标题】：NVD3: Add the 'total' value to stackedAreaChart's interactiveGuidelineNVD3：将“total”值添加到stackedAreaChart 的interactiveGuideline
【发布时间】：2018-02-06 01:41:46
【问题描述】：

有没有一种简单的方法可以在stackedAreaChart 的 interactiveGuideline 工具提示中包含 TOTAL 值？如果我也可以使用这个很棒的工具提示来显示用户总数，那就太好了。

如果不是，最干净的选择是什么？

【问题讨论】：

标签： d3.js tooltip nvd3.js stacked-area-chart

【解决方案1】：

您可以使用 interactiveGuideline.tooltip.contentGenerator

https://github.com/novus/nvd3/blob/master/src/tooltip.js#L316

例如

chart.multiChart.interactiveLayer.tooltip.contentGenerator(function(d) {
  var header = d.value;
  var headerhtml =
    "<thead><tr><td colspan='3'><strong class='x-value'>" +
    header +
    "</strong></td></tr></thead>";
  var bodyhtml = "<tbody>";
  var series = d.series;
  series.forEach(function(c) {
    var value = (c.value || 0).toFixed(2);
    if (
      c.key === keyForActualGreaterThanPredicted ||
      c.key === keyForActualLessThanPredicted
    ) {
      var diff = Math.abs(c.data.y0 - c.data.y1);
      if (diff === 0) {
        value = "-";
      } else {
        value = diff.toFixed(2);
      }
    }
    bodyhtml =
      bodyhtml +
      "<tr><td class='legend-color-guide'><div style='background-color: " +
      c.color +
      ";'></div></td><td class='key'>" +
      c.key +
      "</td><td class='value'>" +
      value +
      "</td></tr>";
  });
  bodyhtml = bodyhtml + "</tbody>";
  return "<table>" + headerhtml + "" + bodyhtml + "</table>";
});

【讨论】：