旋转坐标轴后C3柱状图显示拥挤，如何实现高度自适应？

C3本身没有内置的高度自适应配置，但可以通过以下几种简洁的方式解决条形和图例拥挤的问题：

1. 动态计算图表高度 #

根据类别数量动态推导合适的图表高度，是最直接有效的方式。可以基于每个条形的基础高度（包含间距），加上顶部/底部留白（用于图例、轴标签等）来计算：

// 先获取类别总数，比如示例中的日期数量
const numberOfCategories = number_of_dates;
// 计算高度：每个条形分配30px（含间距），再加100px给图例、轴等区域
const chartHeight = (numberOfCategories * 30) + 100;

然后在图表配置中加入size属性设置高度：

var chart1 = c3.generate({
    bindto: '#chart',
    size: {
        height: chartHeight // 传入动态计算的高度
    },
    // 其他配置项...
});

2. 优化轴标签与图例布局 #

• 调整轴标签显示：如果日期标签过长，可通过旋转或换行减少横向空间占用：

axis: {
    rotated: true,
    x: {
        type: 'timeseries',
        tick: {
            format: '%Y-%m-%d',
            rotate: 45, // 旋转标签避免重叠
            multiline: false // 也可设为true让标签自动换行
        }
    }
}

• 调整图例位置：将图例移到顶部/底部，或用CSS实现滚动图例：

legend: {
    position: 'top' // 可选值：bottom、right、inset
}

如果图例条目过多，添加CSS实现滚动：

.c3-legend {
    max-height: 80px;
    overflow-y: auto;
}
.c3-legend-item {
    display: inline-block;
    margin-right: 10px;
}

3. 动态调整条形宽度 #

根据类别数量灵活设置条形宽度，避免数量多时条形挤在一起：

bar: {
    width: numberOfCategories > 30 ? 8 : 12 // 类别超过30个时缩小条形宽度
}

修改后的完整示例代码 #

JavaScript

let number_of_views_list = [];
let data1 = ['data1'];
let dates = ['x'];
let i = 0;
let number_of_dates = 36;
let max_views = 100;

for (i = 0; i < number_of_dates; i++) {
  let number_of_views = Math.round(Math.random() * max_views);
  data1.push(number_of_views);
  dates.push(moment(`2019-01-01`).add(i, 'days'));
}
number_of_views_list.push(data1);
number_of_views_list.push(dates);

// 动态计算图表高度
const numberOfCategories = number_of_dates;
const chartHeight = (numberOfCategories * 30) + 100;

let ticker_dates = dates.slice(1).filter(date => date.date() === 1);

var chart1 = c3.generate({
    bindto: '#chart',
    size: {
        height: chartHeight
    },
    bar: {
      width: numberOfCategories > 30 ? 8 : 12
    },
    data: {
      x: 'x',
      columns: number_of_views_list,
      types: { 'data1': 'bar' },
      empty: { label: { text: "No Data" } }
    },
    padding: {
      left: 50
    },
    axis: {
      rotated: true,
      x: {
        type: 'timeseries',
        tick: {
          count: dates.length / 10,
          format: '%Y-%m-%d',
          rotate: 45
        }
      }
    },
    legend: {
        position: 'top'
    }
});

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.11/c3.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.9/c3.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.7/d3.min.js"></script>
<div id="chart"></div>

内容的提问来源于stack exchange，提问作者hcac