3

根据C3 文档，legend.inset.postition仅支持top-left, top-right,bottom-left和bottom-right位置。我想让我的传奇定位在top-center.

这是创建情节的JS：

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 100, 200, 50, 300, 200, 50, 250, 100, 200, 400, 50],
            ['data2', 400, 500, 250, null, 300, 50, 200, 450, 300, 300, 100]
        ],
    },
    legend: {
        position: 'inset',
        inset: {
            anchor: 'top-left', // how do I implement 'top-center'?
            x: 40,
            y: 2,
            step: 1
        }
    }
});

在绘制图表后，我试图通过计算元素的当前位置来重新定位元素。但是，所有 SVG 元素似乎都没有启用这种自省的属性：

var legend = d3.select(".c3-legend-background");
console.log("style[width]: " + legend.style("width")); // style[width]: auto
console.log("attr[x]: " + legend.attr("x")); // attr[x]: null
console.log("attr[y]: " + legend.attr("y")); // attr[y]: null
4

1 回答 1

4

您不只是将插入对象的 x 值设置为正确的值以使其居中位于顶部吗？

这将取决于您的图表宽度是否以及您的图例宽度。所以计算将是(ChartWidth - LegendWidth) / 2。

然后，图例对象类似于：

legend: {
    position:'inset',
    inset: {
        anchor: 'top-left',
        x: 200 // put the result of your calculation here
    }
}

这是一个粗略的例子：http: //jsfiddle.net/jrdsxvys/11/

于 2015-05-13T15:13:15.087 回答