2

我正在尝试通过设置一些宽度限制来使图例文本换行。无论我尝试了什么,我都无法弄清楚如何减小“.c3-legend-item-event”的宽度,以便它可以达到两行或更多行,否则文本太长以至于超出了我的 html 范围。

图例设置为:legend: {position: 'inset'} 然后我将它移向图表的右侧,但我无法将其换行或分成两行或更多行。

我阅读了带有 jQ​​uery 的示例来附加您自己的易于修改的图例,但是,我想避免它。我也无法控制数据馈送,也无法缩短图例文本。

参考我用来查看源代码的图表在这里: http ://c3js.org/samples/chart_bar.html

参考图例选项和设置在这里: http ://c3js.org/reference.html

这是我的代码的一部分:

var bar = c3.generate({
        legend: {
            position: 'inset',
            inset: {
                x: 300,
                y: 40,
            }
        },
        data: {
          columns: list,
          type: 'bar',
          onclick: function (d, element) { console.log("onclick", d, element); },
          onmouseover: function (d) { console.log("onmouseover", d); },
          onmouseout: function (d) { console.log("onmouseout", d); },
          order: "asc"
        },
        bar: {
          width: {
            ratio: 0.7,
            //max: 50
          },
        },
});

任何帮助表示赞赏。

谢谢你。在此处输入图像描述

4

0 回答 0