如何在FusionCharts气泡图中显示所有同值的重叠气泡？

我之前也遇到过这个FusionCharts气泡图的重叠问题！默认情况下，当多个气泡的score（x轴值）和size（z轴值）完全相同时，它们会完全叠在一起，只有最上面的那个能被看到，而且图表本身确实没有内置选项来自动分散这些重叠气泡。不过我们可以通过预处理数据源的方式来解决这个问题，下面是具体的实现思路和代码示例：

核心思路：手动微调同值气泡的坐标 #

我们可以在渲染图表前，对原始数据源做预处理：把所有x（score）和z（size）完全相同的气泡归为一组，给每组内的气泡添加一个极小的坐标偏移量（可以是x轴或y轴方向），让它们稍微错开，这样所有气泡都能清晰显示，同时又不会偏离原始数据的表达。

修改后的完整代码示例 #

FusionCharts.ready(function () {
    // 模拟原始数据源，包含多组重叠的气泡
    const rawBubbleData = [
        { "x": 80, "y": 65, "z": 50, "label": "Product A" },
        { "x": 80, "y": 65, "z": 50, "label": "Product B" },
        { "x": 80, "y": 65, "z": 50, "label": "Product C" },
        { "x": 70, "y": 70, "z": 60, "label": "Product D" },
        { "x": 70, "y": 70, "z": 60, "label": "Product E" }
    ];

    // 第一步：按x(score)和z(size)分组，找出重叠的气泡组
    const groupedData = {};
    rawBubbleData.forEach(bubble => {
        const groupKey = `${bubble.x}-${bubble.z}`;
        if (!groupedData[groupKey]) {
            groupedData[groupKey] = [];
        }
        groupedData[groupKey].push(bubble);
    });

    // 第二步：给每组重叠气泡添加偏移量
    const processedData = [];
    // 偏移步长，可根据图表数值范围调整，确保偏移后不影响数据可读性
    const offsetStep = 0.6;

    Object.values(groupedData).forEach(group => {
        if (group.length === 1) {
            // 无重叠的气泡直接保留
            processedData.push(group[0]);
        } else {
            // 计算偏移起始值，让气泡均匀分散在原始值两侧
            const startOffset = -(group.length - 1) * offsetStep / 2;
            group.forEach((bubble, index) => {
                processedData.push({
                    ...bubble,
                    // 给x轴值添加偏移，也可以根据需求修改y轴值
                    x: bubble.x + startOffset + index * offsetStep
                });
            });
        }
    });

    // 初始化并渲染图表
    var conversionChart = new FusionCharts({
        type: 'bubble',
        renderAt: 'chart-container',
        width: '600',
        height: '300',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Sales Performance",
                "xAxisName": "Score",
                "yAxisName": "Revenue",
                "theme": "fusion"
            },
            "data": processedData
        }
    });
    conversionChart.render();
});

补充说明 #

• 你可以根据图表的实际数值范围，调整offsetStep的大小，确保偏移后的气泡既不会过度分散，也不会依然重叠。
• 如果更希望在y轴方向偏移，只需要把代码中修改x值的部分改成修改y值即可。
• 这种方案不需要修改FusionCharts的内置逻辑，仅通过预处理数据源实现，兼容性强，对现有图表配置的改动极小。

内容的提问来源于stack exchange，提问作者Shamnad K M