如何使用dc.js将符号/图标与字符串连接起来以绘制条形图标签

Question

 rowChart
    .width(500)
    .height(200)
    .dimension(neighborhoodDimension)
    .group(neighborhoodGroup)
    .label(function (d) { return d.value;})

我想将符号/图标与条形图的标签连接起来，例如屏幕截图。 JsFiddle- http://jsfiddle.net/3chM6/460/

中的工作示例

Answer 1

如果您只想在dc.js支持的单行标签中添加符号，则可以通过提供自定义.label()函数来实现。 [如评论中所述，多行标签和条形图的侧面的标签将需要一些自定义pretransition代码。]

条形图的默认标签是晦涩的

_chart.label(function (d) {
    return dc.utils.printSingleValue(d.y0 + d.y);
}, false);

(source link)

之所以这样，是因为条形图是堆叠在一起的，因此可以找到堆叠的总数。标签仅显示在顶部堆栈中。

条形图标签使用selection.text()指定内容：

        .text(function (d) {
            return _chart.label()(d);
        });

(source link)

由于它是.text()而不是.html()，所以这意味着您不能使用HTML字符实体。但是您仍然可以通过直接在UTF8源代码中键入Unicode符号来添加该符号：

          .label(d => d.y0 + d.y + '⯅');

我在Linux上通过输入 leftctrl-shift-U 2 b c 5 空间-其他操作系统在UTF8中直接键入的方式有所不同。

结果：

您可以为此添加一些逻辑以选择不同的符号，但这与内置功能差不多。您将无法获得与文本不同的颜色，它们只能放在条形图的顶部。

添加具有自定义位置，多行，多种颜色的自定义标签并不难，但我现在没有时间来编写示例。搜索[dc.js]预转换或renderlet，您应该在SO上挖掘一些示例。