【问题标题】：Top Right Legend Position for a C3 chart?C3图表的右上角图例位置？
【发布时间】：2014-11-11 23:44:49
【问题描述】：

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

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

谢谢

【问题讨论】：

刚刚实现了Custom Legend Option，它允许我以任何我想要的方式定位（和风格）图例

标签： c3.js

【解决方案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，legend'll 的位置就会改变。您可以使用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。 Current example 太复杂了。在那之前，我希望这个答案可以节省您的时间。编写出色的代码。

【讨论】：

很好的答案。在the example 中，不清楚position: 'inset' 是必需的。您的回答在这里说明了这一点。谢谢。

【解决方案2】：

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

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

并且图例不会覆盖图表。

【讨论】：

【解决方案3】：

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
        ]
    },
     legend: {
        show: true,
        position: 'inset',
        inset: {
            anchor: 'top-right',
            x:undefined,
            y: undefined,
            step: undefined
        }
    }
});

在 x,y 和 step 中替换为 undefined 。图例显示在右上角。

【讨论】：

【解决方案4】：

  inset: {
            anchor: 'top-right',
            x: 250,
            y: 50,
            step: 5
        }

改成

  inset: {
            anchor: 'top-right'
        }

【讨论】：