C3.js - 在窗口大小调整时，如何从右到下更改图例位置

Question

当浏览器大小调整到一定大小以下时，我正在尝试更新饼图上的 c3 图例。也不能通过 css 定位，因为图形是 svg 并创建我们无法定位的组。例如 SVG g { ...

这是我尝试使用 c3 函数 legend.hide(( 隐藏和显示图例的尝试;此尝试在第一次加载时有效(删除调整大小功能(，但我希望它是动态的，因此如果手动调整浏览器大小，则根据规则隐藏/显示图例。

$(window).resize(function() {
  if ($(window).width() < 650) {
    chart.legend.hide();
      console.log('plz hide!');
    } else {
      chart.legend.show();
    }
 });

Answer 1

尝试使用 onresize 属性：

var chart = c3.generate({
    bindto: d3.select('.chart'),
    onresize: function () {
      //your code to change labels here
    },
    data: {
     ...
    }
});

您也可以在此处查看 c3.js 文档