Question

如果您从c3js获取正常条形图，则条形将位于x-tick位置的中心。我有一个每小时的图表，所以在00-24之间的任何时间跨度（通常像8-16）。如果我有一个折线图或散点图，它会很好地在x-tick上自我对齐，但不能作为步骤图或条形图。

var chart = c3.generate({
    data: {
            x: 'x',
        columns: [
                ['x', 8, 9, 10, 11, 12, 13, 14, 15, 16],
            ['data1', 1, 1, 0, 1, 0, 0, 1, 1, 1],
        ],
        type: "bar"
    }, 
    axis: {
        x: {
        type: "category",
        categories: [],
      }
    }
});

看到这个小提琴：https://jsfiddle.net/jvcarphe/1/

我一直在尝试各种剔除/剔除值/时间序列等等但我不能因为上帝的爱而弄清楚如何去做。如果小提琴中的类型更改为"line"，它就会完全符合我的要求，除此之外不是吧。

Answer 1

我以前必须这样做，并且似乎没有一个简单的设置，但有点d3操作工作。我得出结论，移动刻度线比棒更容易：

如果您知道条形图的宽度，可以设置一个css规则来偏移刻度线，只需将-10px更改为任何必要的 - ＆gt;

.c3-axis-x .tick line, .c3-axis-x .tick text {
  transform: translate(-10px,0);
}

（不能将规则应用于.tick，因为c3会覆盖其转换样式）

如果您不知道宽度，那么您需要通过查询其中一个条并在c3的onrendered回调中动态应用相同的样式规则来找到它：

onrendered: function () {
        var thisChart = d3.select(this.config.bindto);
        var barWidth = thisChart.select(".c3-bar-0").node().getBoundingClientRect().width / 2;
        thisChart.selectAll(".c3-axis-x .tick line,.c3-axis-x .tick text").style("transform", "translate(-"+barWidth+"px,0)");
}

小提琴编辑为c3的新版本在小提琴中不起作用：

https://jsfiddle.net/15w50f06/4/

c3js条形图，将数据对齐到x刻度开始位置（不居中）

1 个答案: