Question

我试图将x类别轴上的值推到条形的两侧，而不是在中间。显然有可能把滴答声放在那里，但值也可以在滴答声之下吗？

＆＃13;

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
    }
  });

＆＃13;

<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>

＆＃13;

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);

＆＃13;

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);

＆＃13;

<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>

＆＃13;

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

1 个答案: