如果设置了条形宽度比例,则在 C3 中更改工具提示宽度比率



在 C3 条形图中,当我们将宽度比设置为小于 1 时,条形会挤压,但工具提示区域不会。我们如何将工具提示设置为仅显示在栏上,而不是在整个区域上显示,如以下示例所示。

var chart = c3.generate({
data: {
columns: [
['data1', -30, 200, 200, 400, -150, 250],
['data2', 130, 100, -100, 200, -150, 50],
['data3', -230, 200, 200, -300, 250, 250]
],
type: 'bar',
groups: [
['data1', 'data2']
]
},bar: {
width: { ratio: 0.5 }
},
grid: {
y: {
lines: [{value:0}]
}
}
});
setTimeout(function () {
chart.groups([['data1', 'data2', 'data3']])
}, 1000);
setTimeout(function () {
chart.load({
columns: [['data4', 100, -50, 150, 200, -300, -100]]
});
}, 1500);
setTimeout(function () {
chart.groups([['data1', 'data2', 'data3', 'data4']])
}, 2000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.12/c3.js"></script>
<div id="chart"></div>

是否检查了工具提示属性? https://c3js.org/reference.html#tooltip-contents

最新更新