Question

我想更改图例的大小，因为在使用左下角的位置插图后，我的图例元素之间没有相同的间距：

https://user-images.githubusercontent.com/9460795/58431609-d9e77400-80ae-11e9-97c6-9efbd89bd558.png

我已经尝试更改条形宽度，但是什么也没发生

legend: { position: 'inset', padding: 10, inset: { anchor: 'bottom-left', x: -5, y: -50 - (20 * (this.selectedData.length - 2)), step: 1 }, item: { onmouseover: (id) => this.mouseOverLegendItem(id), onmouseout: (id) => this.mouseOutLegendItem(id), onclick: (id) => this.onmouseClickLegendItem(id) } }, bar: { width: 30 },

我该如何解决？我在c3上是新手，抱歉：（

C3版本：“ ^ 0.6.13”， D3版本：“ ^ 5.9.1”

Answer 1

不幸的是，当图例为“插入”类型时，此固定宽度似乎被烘焙到定位代码中。如果您希望图例水平显示，并且两个项目之间没有多余的间距，则必须将图例位置设置为“底部”。

如果您进行了这样的修改，虽然可以将最底下的图例移动到图表区域中以模仿插图，但它非常脆弱-请参见https://jsfiddle.net/5odf8w0x/

var chart = c3.generate({
    data: {
        columns: [
            ['data1ytuytuytutyuu', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25],
            ['data3', 10, 20, 30, 40, 60, 70]
        ]
    },
    legend: {
        position: 'bottom'
    },
    onrendered: function () {
        console.log(this, this.config);
        var x = +d3.select(this.config.bindto).select(".c3-legend-item text").attr("x");
        x -= 70; // for axis and margin
        d3.select(this.config.bindto).selectAll(".c3-legend-item").attr("transform", "translate(-"+x+",-50)");
    }
});

C3js-如何更改左下图例的宽度

1 个答案: