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

show legends on top as like bottom appearance in c3js

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

  1. 传奇
  2. 图表
  3. 刻度

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

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

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

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

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

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

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