c3.js - C3 图表的右上角图例位置？

Question

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

当前选项似乎只允许“底部”和“右侧”。我注意到有一个“自定义图例选项”。但是，我想在继续这条道路之前进行检查。

谢谢

Answer 1

我有同样的问题。所以我花了很多时间来寻找解决方案。最后，我得到了解决方案。这是解决方案。
文档
C3 文件还不错，但有些例子不完整。 图例位置是其中之一。
The example图例的显示位置只能位于bottom, right and inset .就这样。但是在document ，你可以找到更多的可能性。
看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可能是调整图例的长度。如果你增加它，那么legend'll会更长。但这是我的猜测。请有人解释更多。
例子
这是我的例子。

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

希望C3添加或引用c3.legend.inset . Current example太复杂了。在那之前，我希望这个答案可以节省您的时间。有很棒的编码。