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

Question

有没有办法将图例定位在右上方＆＃39;对于c3图表？

目前的选项似乎只允许＆＃39;底部＆＃39;并且＆＃39;对＃39;我注意到有一个＆＃39;自定义图例选项＆＃39;。但是，我想在继续沿着这条路走下去检查。

由于

Answer 1

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

文档

C3的文件很好。但事实是如此。正确地，该示例并未显示关于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可以调整图例的长度。如果你增加它，那么传奇会更长。但这是我的猜测。请有人详细解释一下。

实施例

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

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让人感到困惑。直到那个时候，我希望它可以节省你的时间。有很好的编码。

Answer 2

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

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

传说不会涵盖图表。

Answer 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。图例显示在右上角。

Answer 4

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

更改为

  inset: {
            anchor: 'top-right'
        }