如何将C3图表Tooltip的大量数据按每栏10行拆分显示

嘿，我刚好解决过类似的C3图表tooltip布局问题，给你分享个完美适配需求的方案！

要把50个数据系列的tooltip拆成每10个一组的多栏，核心是利用C3提供的tooltip.contents自定义函数，完全接管tooltip的HTML渲染，再配合CSS实现多栏布局。

完整实现代码 #

首先是图表生成的JS代码，重点看tooltip部分的配置：

chart = c3.generate({
    bindto: "#yearly",
    data: {
        x: 'x',
        columns: [
            ['x', 1, 2, /* ... 你的100个x值 */, 100],
            ['data1', 10, 20, /* ... 对应数据 */, 30],
            ['data2', 15, 16, /* ... 对应数据 */, 90],
            // ... 一直到data50
            ['data50', 20, 30, /* ... 对应数据 */, 80]
        ]
    },
    tooltip: {
        contents: function(d, defaultTitleFormat, defaultValueFormat, color) {
            // 把数据按每10个一组拆分
            const groupSize = 10;
            const dataGroups = [];
            for (let i = 0; i < d.length; i += groupSize) {
                dataGroups.push(d.slice(i, i + groupSize));
            }

            // 保留原生的标题格式化逻辑
            const title = defaultTitleFormat(d[0].x);

            // 生成每一栏的内容
            let columnsHTML = '';
            dataGroups.forEach(group => {
                let columnRows = '';
                group.forEach(dataItem => {
                    const formattedValue = defaultValueFormat(dataItem.value);
                    columnRows += `
                        <tr>
                            <td style="color:${color(dataItem.id)}">${dataItem.name}</td>
                            <td style="text-align:right">${formattedValue}</td>
                        </tr>
                    `;
                });
                columnsHTML += `
                    <div class="tooltip-column">
                        <table>
                            <tbody>${columnRows}</tbody>
                        </table>
                    </div>
                `;
            });

            // 组合最终的tooltip结构
            return `
                <div class="c3-tooltip-custom">
                    <div class="tooltip-title">${title}</div>
                    <div class="tooltip-columns">${columnsHTML}</div>
                </div>
            `;
        }
    }
});

然后加上CSS来实现多栏的横向布局：

.c3-tooltip-custom {
    padding: 8px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.tooltip-title {
    margin-bottom: 8px;
    font-weight: 600;
    text-align: center;
}

.tooltip-columns {
    display: flex;
    gap: 16px; /* 调整栏与栏之间的间距 */
    flex-wrap: wrap; /* 窗口变窄时自动换行，保证兼容性 */
}

.tooltip-column table {
    border-collapse: collapse;
}

.tooltip-column td {
    padding: 4px 8px;
    font-size: 14px;
}

关键逻辑说明 #

• 数据分组：通过循环把原始的50条数据按每10个分割成5组，刚好对应你需要的data1-10、data11-20等分组
• 保留原生样式：复用了C3默认的defaultTitleFormat和defaultValueFormat函数，还有颜色获取逻辑，确保tooltip的基础样式和原生一致
• Flex布局：用CSS Flex实现多栏横向排列，同时加了flex-wrap，在屏幕较小时会自动换行，不会出现横向溢出的问题

这个方案刚好适配你的50条数据的情况，如果后续数据数量变化（比如变成55条），最后一组会自动显示剩下的5条，完全不用修改代码~

内容的提问来源于stack exchange，提问作者Nandini