legend - 在顶部显示图例，就像在 c3js 中的底部外观一样

Question

我正在使用 c3.js 来实现仪表板。它工作得很好。但我只想要底部出现的图例。我想按照这个顺序绘制图表。

1. 传奇
2. 图表
3. 蜱虫

这是想要的示例图。 通过在网络中搜索，如果我这样设置图例配置

legend: {
           show: true,
           position: 'inset',
           inset: {
                    anchor: 'top-right',
                    x: 50,
                    y: 0,
                    step: 1
                  }
        }

然后图例与主图重叠如下图:

这是非常典型的要求，但在 c3js 中不可用。我该怎么做？

Answer 1

使用 padding 选项设置顶部间隙: http://c3js.org/reference.html#padding-top

然后在插图上设置一个负的 y 偏移量:

       legend: {
            position: 'inset',
           inset: {
                anchor: 'top-right',
                x: 50,
                y: -30,
                step: 1
            }
        },
       padding: {
            top: 30
        }