Question

我试图在每个条形图上方的堆积条形图的总计中添加标签。我使用此示例（http://dimplejs.org/advanced_examples_viewer.html?id=advanced_bar_labels）为条形图的每个部分添加总计，但我不确定如何添加上面的总计。我还能够在每个条形图上方添加总标签，用于单个系列（不是堆叠）。我只是无法使用叠加的条形图。

我目前的解决方法是绘制一个额外的空系列行，但使线条和标记透明，这样您仍然可以在工具提示中看到总值。但是，我真的很想在每个栏上方显示总数。

以下是代码：

var svg = dimple.newSvg("#chartContainer", 590, 400);
var myChart = new dimple.chart(svg, data);
myChart.setBounds(80, 30, 510, 305);
var x = myChart.addCategoryAxis("x", "Month");
x.addOrderRule(Date);
var y = myChart.addMeasureAxis("y", "Calls");
y.showGridlines = true;
y.tickFormat = ',6g';
y.overrideMin = 0;
y.overrideMax = 800000;
var s = myChart.addSeries("Metric", dimple.plot.bar);

s.afterDraw = function (shape, data) {
    var s = d3.select(shape),
        rect = {
            x: parseFloat(s.attr("x")),
            y: parseFloat(s.attr("y")),
            width: parseFloat(s.attr("width")),
            height: parseFloat(s.attr("height"))
        };
    if (rect.height >= 1) {
        svg.append("text")
            .attr("x", rect.x + rect.width / 2)
            .attr("y", rect.y + rect.height / 2 + 3.5)
            .style("text-anchor", "middle")
            .style("font-size", "9px")
            .style("font-family", "sans-serif")
            .style("opacity", 0.8)
            .text(d3.format(",.1f")(data.yValue / 1000) + "k");
    }
};

myChart.addLegend(60, 10, 510, 20, "right");
myChart.draw();

这是JSFiddle：http://jsfiddle.net/timothymartin76/fusaqyhk/16/

我很感激您的帮助。

谢谢！

Answer 1

您可以在绘图后通过计算总计并从中导出y位置来添加它们：

// Iterate every value on the x axis
x.shapes.selectAll("text").each(function (d) {

    // There is a dummy empty string value on the end which we want to ignore
    if (d && d.length) {

        // Get the total y value
        var total = d3.sum(data, function (t) { return (t.Month === d ? t.Calls : 0); });
        // Add the text for the label
        var label = svg.append("text");

        // Set the x position
        // x._scale(d) is the tick position of each element
        // (myChart._widthPixels() / x._max) / 2 is half of the space allocated to each element
        label.attr("x", x._scale(d) + (myChart._widthPixels() / x._max) / 2)

        // Vertically center the text on the point
        label.attr("dy", "0.35em")

        // Style the text - this can be better done with label.attr("class", "my-label-class")
        label.style("text-anchor", "middle")
            .style("font-size", "9px")
            .style("font-family", "sans-serif")
            .style("opacity", 0.8)

        // Set the text itself in thousands
        label.text(d3.format(",.1f")(total / 1000) + "k");

        // Once the style and the text is set we can set the y position
        // y._scale(total) gives the y position of the total (and therefore the top of the top segment)
        // label.node().getBBox().height gives the height of the text to leave a gap above the bar
        label.attr("y", y._scale(total) - label.node().getBBox().height)
    }

});

这是您更新的小提琴：http://jsfiddle.net/fusaqyhk/17/

Dimple Stacked Bar Chart - 为总计添加标签

1 个答案: