C3图表右上方的图例位置？

Question

有没有办法将图例定位在c3图表的"右上角"？

当前选项似乎只允许"底部"和"右侧".我注意到有一个'自定义图例选项'.但是,我想在继续这条路之前检查一下.

谢谢

Answer 1

我有同样的问题.所以我花了很多时间来找到解决方案.最后,我得到了解决方案.在这里,我将分享这个解决方案.

文献

C3的文件很好.但事实是如此.正确地,该示例并未显示关于C3的所有内容.传奇的位置就是其中之一.

示例显示图例的位置只能位于bottom, right and inset.就这样.但在文档中,您可以找到更多可能性.

查看文档中的c3.legend.position.文件说再次传说只能位于bottom, right and inset.但不要失望.请看下面的项目c3.legend.inset.而今天,该项目将节省我们的时间.

码

首先,看一下这个例子.

legend: {
  inset: {
    anchor: 'top-right'
    x: 20,
    y: 10,
    step: 2
  }
}

你看到了吗？这是top-right你想要的.代码工作得非常好.如果更改anchor,则会更改图例的位置.你可以用x和调整坐标y.并且step可以调整图例的长度.如果你增加它,那么传奇会更长.但这是我的猜测.请有人详细解释一下.

例

我编码如下.这是我的例子.

var appActivityChart = c3.generate({
    data: {
        ...
    },
    legend: {
        show: true,
        position: 'inset',
        inset: {
            anchor: 'top-right',
            x: 250,
            y: 50,
            step: 5
        }
    }
});

我希望C3添加或引用c3.legend.inset.目前的例子让人有些困惑.直到那个时候,我希望它可以节省你的时间.有很好的编码.

Answer 2

我有同样的问题，并找到了下一个将图例放置在图表上方的解决方案：

legend: {
    position: 'inset',
    inset: {
        anchor: 'top-left',
        x: 20,
        y: -40,
        step: 1
    }
},
padding: {
    top: 40
}

并且图例不会覆盖图表。