c3 条形图将刻度值与非居中刻度对齐

Question

我试图将 x 类别轴上的值推到条形的两侧，而不是中间。显然可以将刻度线放在那里，但是值也可以放在刻度线下面吗？

var chart;
chart = c3.generate({
    data: {
        columns: [
            ['data', 30, 200, 100, 400, 150, 250]
        ],
        type: 'bar'
    },
    bar: {
        width: {
            ratio: 0.98 
        }
    },
    axis: {
      x: {
        type: 'category',
        categories: [10, 50, 100, 500, 2000, 5000],
        tick: {
          centered: false
        }
      }
    },
    legend: {
        show: false
    }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
<div id="chart" class="c3" style="max-height: 280px; position: relative;"></div>

Answer 1

这不是最漂亮的答案，最后一个标签被砍掉了（您必须研究 c3 的填充选项），但是在您渲染图表后的这两行可以解决问题：

  // use c3's internal x scale to get the width of one bar
  var width = chart.internal.x(1) - chart.internal.x(0);
  // shuffle all the tick label tspans along by half a bar's width  
  d3.select(".c3-axis").selectAll(".tick text tspan").attr("dx", width/2);

var chart;
chart = c3.generate({
    data: {
        columns: [
            ['data', 30, 200, 100, 400, 150, 250]
        ],
        type: 'bar'
    },
    bar: {
        width: {
            ratio: 0.98 
        }
    },
    axis: {
      x: {
        type: 'category',
        categories: [10, 50, 100, 500, 2000, 5000],
        tick: {
          centered: false
        }
      }
    },
    legend: {
        show: false
    }
  });

  var width = chart.internal.x(1) - chart.internal.x(0);
  d3.select(".c3-axis").selectAll(".tick text tspan").attr("dx", width/2);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script>
<div id="chart" class="c3" style="max-height: 280px; position: relative;"></div>

c3 条形图将刻度值与非居中刻度对齐

c3 bar graph align tick values with non-centered ticks

javascript

c3.js