我正在使用堆积条形图。如何使工具提示仅显示数据的类别,而不是确切的值,或者作为替代方法,可以显示类别而不是条形末尾的值(就像设置.showValue(true)
一样,但是与类别)。
更新
我找到了一个解决方案,只在工具提示中显示类别(键),但它涉及修改源代码,看起来不太好。 我认为我想要做的正确名称是显示每个栏的标签。我无法使用此代码:
chart.xAxis.
.axisLabel(attrs.xAxisLabel)
.tickFormat(d3.format('r'));
因为它给我一个错误,attrs
没有定义。我有了from here的想法。但我不能让它发挥作用。
更新
更具体一点:
我希望在垂直轴上显示round_1_2
,而不仅仅是在我悬停时。
答案 0 :(得分: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>';
});
它们通过多栏功能上的函数公开工具提示,因此您可以修改用于呈现工具提示的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/