问题标题

VChart的多分组柱状图是否支持多层轴标签？

问题描述

我是使用VChart图表库的一位开发者。最近我碰到了一个问题，我想在多分组柱状图中使用多层轴标签，像下图这种效果：

解决方案

当spec中的xField有多个字段时，会开启柱状图分组。你可以通过设置axes中x轴的showAllGroupLayers为true开启展示所有的分组轴。

你可以参考下面的示例：

const spec = {
    type: 'bar',
    data: [
        {
            values: [
                { type: 'Category One', min: 76, max: 100, range: 'A', type2: 'p', color: 'A_p' },
                //... 其他数据项
            ]
        }
    ],
    xField: ['type', 'range', 'type2'],
    yField: 'in',
    seriesField: 'color',
    paddingInner: [0.6, 0.6, 0.6],
    bandPadding: [0.6, 0.6, 0.6],
    label: { position: 'bothEnd' },
    axes: [
        { orient: 'bottom', showAllGroupLayers: true, sampling: false, tick: { tickCount: 2 } }
    ],
    legends: { visible: true }
};

const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderAsync();
// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;

结果展示

柱状图将按照xField分组，同时展示每个分组的标签：

在线demo：codesandbox.io/p/sandbox/l…

VChart的多分组柱状图是否支持多层轴标签？

问题标题

问题描述

解决方案

结果展示

相关文档