2

我正在使用堆积条形图。如何使工具提示仅显示数据的类别，而不是确切的值，或者作为替代方法，是否可以显示类别而不是条末尾的值（就像您设置.showValue(true)了 ，但带有类别）。

更新

我找到了一个在工具提示中只显示类别（键）的解决方案，但它涉及到源代码的修改，看起来不太好。我认为我想要做的正确名称是显示每个栏的标签。我无法使其与此代码一起使用：

chart.xAxis.
          .axisLabel(attrs.xAxisLabel)
          .tickFormat(d3.format('r'));

因为它给了我一个attrs未定义的错误。我从这里得到了想法。但我不能让它工作。

更新

更具体一点：

我的图表

我想在垂直轴上显示round_1_2，而不仅仅是在我悬停时。

4

1 回答 1

3

更新：工作小提琴：http: //jsfiddle.net/reblace/D2Dak/4/

NVD3代码生成错误仍然存​​在一些问题......他们的网站示例也有问题......但是，现在我在这里提到的东西是可以证明的。

要在不修改其代码的情况下自定义工具提示，请在您的代码中尝试：

chart.tooltip(function(key, x, y, e, graph) {
    return '<h3>' + key + '</h3>' +
           '<p>' +  y + ' on ' + x + '</p>';
});

它们通过 multibarchart 函数上的函数公开工具提示，因此您可以修改用于呈现工具提示的 HTML 模板。

还有

chart.reduceXTicks(false);      // Will show labels on all bars
chart.rotateLabels(angle);      // Rotate the labels to "angle" degrees
chart.xAxis.staggerLabels(true) // Staggers the X Axis labels vertically so they don't run into eachother

如果您查看他们的源代码，您可以找到公开所有内容以供修改的部分：

//============================================================
// Expose Public Variables
//------------------------------------------------------------

// expose chart's sub-components
chart.dispatch = dispatch;
chart.multibar = multibar;
chart.legend = legend;
chart.xAxis = xAxis;
chart.yAxis = yAxis;
...
chart.reduceXTicks= function(_) {
  if (!arguments.length) return reduceXTicks;
  reduceXTicks = _;
  return chart;
};

chart.rotateLabels = function(_) {
  if (!arguments.length) return rotateLabels;
  rotateLabels = _;
  return chart;
}

chart.tooltip = function(_) {
  if (!arguments.length) return tooltip;
  tooltip = _;
  return chart;
};

Mike Bostock 在 NVD3 遵循的“面向可重用图表”中描述了一种设计模式，因此熟悉它可能会有所帮助。http://bost.ocks.org/mike/chart/

于 2013-09-27T19:41:38.927 回答