c3.js：如何旋转条形图条形项目上方的标签？答案

【问题标题】：c3.js : How to rotate the labels above the bar-chart bar items?c3.js：如何旋转条形图条形项目上方的标签？
【发布时间】：2017-05-16 14:41:50
【问题描述】：

http://i.imgur.com/bbFBotv.png

如何旋转这些值？（打开上面的链接）我使用的是 c3.js 最新版本。感谢您的帮助。 简单示例：

var chart = c3.generate({
    data: {
        columns: [
            ['Value', 30, 200, 100, 400, 150, 250],
        ],
        type: 'bar',
        labels: true
    },
});

【问题讨论】：

欢迎来到Stack Overflow！在此站点上，您应该尝试自己编写代码。在 doing more research 之后，如果您遇到问题，您可以发布您尝试过的内容，并提供对无效内容的明确解释并提供Minimal, Complete, and Verifiable example。我建议阅读How to Ask 一个好问题和the perfect question。另外，请务必使用tour 并阅读this。
我的问题是直接和说明性的，但感谢您的评论。
c3js.org/samples/axes_x_tick_rotate.html

标签： javascript d3.js bar-chart c3.js

【解决方案1】：

没有像轴标签那样的 c3 设置，但您可以使用 onrendered 回调中的一些 d3 代码旋转它们：

onrendered: function () {
    d3.selectAll(".c3-chart-texts text.c3-text")
        .attr("transform", function(d) {
            var textSel = d3.select(this);
            return "rotate(90, "+textSel.attr("x")+", "+(textSel.attr("y"))+")";
        })
        .style("text-anchor", function(d) {
            return (d.value && d.value > 0) ? "end" : "centre";
        })
    ;
}

http://jsfiddle.net/cfjm0gLh/1/

【讨论】：