我正在尝试通过设置一些宽度限制来使图例文本换行。无论我尝试了什么,我都无法弄清楚如何减小“.c3-legend-item-event”的宽度,以便它可以达到两行或更多行,否则文本太长以至于超出了我的 html 范围。
图例设置为:legend: {position: 'inset'} 然后我将它移向图表的右侧,但我无法将其换行或分成两行或更多行。
我阅读了带有 jQuery 的示例来附加您自己的易于修改的图例,但是,我想避免它。我也无法控制数据馈送,也无法缩短图例文本。
参考我用来查看源代码的图表在这里: 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
},
},
});
任何帮助表示赞赏。
谢谢你。