使用dimple.js创建带百分比轴的散点图失败求助

嘿，我看了你写的代码，发现几个关键问题导致你没能成功实现需求，咱们一步步来修正它：

问题出在哪？ #

• 你创建了两个独立的Y方向百分比轴，这会导致轴重叠，而且dimple的百分比轴是基于整个图表数据集计算的，重复创建会让计算逻辑混乱
• 给每个系列单独赋值数据，没有让图表统一处理完整数据集，百分比轴没法基于全部数据算出正确的占比

修正后的完整代码 #

// 先把两年的数据合并成一个完整数据集，让图表能基于全部数据计算百分比
const allData = [
 { "Value" : 10, "Fruit" : "Grapefruit", "Year" : 2012 },
 { "Value" : 40, "Fruit" : "Apple", "Year" : 2012 },
 { "Value" : 12, "Fruit" : "Banana", "Year" : 2012 },
 { "Value" : 11, "Fruit" : "Grapefruit", "Year" : 2013 },
 { "Value" : 30, "Fruit" : "Apple", "Year" : 2013 },
 { "Value" : 14, "Fruit" : "Banana", "Year" : 2013 }
];

// 创建SVG容器，这里假设你已经引入了dimple和d3
const svg = dimple.newSvg("body", 800, 600);
// 初始化图表时传入完整数据集
const chart = new dimple.chart(svg, allData);

// X轴用水果分类
const xAxis = chart.addCategoryAxis("x", "Fruit");
// 只创建一个Y方向的百分比轴，基于所有数据的Value计算占比
const yAxis = chart.addPctAxis("y", "Value");

// 用Year作为系列区分，不同年份的气泡会自动用不同颜色标识
const bubbleSeries = chart.addSeries("Year", dimple.plot.bubble, [xAxis, yAxis]);

// 可选：设置气泡的大小范围，让显示更美观合理
bubbleSeries.minSize = 5;
bubbleSeries.maxSize = 50;

// 绘制图表
chart.draw();

关键调整说明 #

1. 合并数据集：把2012和2013年的数据放到同一个数组里，这样百分比轴能基于所有数据的总和计算每个值的占比，结果才准确。
2. 单一百分比轴：只保留一个Y方向的百分比轴，所有系列共享它，避免轴重叠和计算冲突。
3. 统一管理系列：用Year作为系列字段，让dimple自动处理不同年份的数据分组，不用手动创建两个系列并赋值，代码更简洁也符合dimple的设计逻辑。

进阶需求：按年份单独计算百分比 #

如果你想要每个年份的百分比是基于当年自身的数据总和（而不是所有年份的总和），那需要先预处理数据，手动计算出每个数据点的百分比，再用普通数值轴展示：

// 先计算每年的总Value
const yearTotals = {};
allData.forEach(item => {
  if (!yearTotals[item.Year]) {
    yearTotals[item.Year] = 0;
  }
  yearTotals[item.Year] += item.Value;
});

// 处理数据，添加每个点的百分比字段
const processedData = allData.map(item => ({
  ...item,
  YearlyPct: (item.Value / yearTotals[item.Year]) * 100
}));

// 创建图表并使用处理后的数据
const svg = dimple.newSvg("body", 800, 600);
const chart = new dimple.chart(svg, processedData);

const xAxis = chart.addCategoryAxis("x", "Fruit");
// 用普通数值轴绑定我们计算好的百分比字段
const yAxis = chart.addMeasureAxis("y", "YearlyPct");
// 设置轴标签显示为百分比格式
yAxis.tickFormat = ".1f%";

const bubbleSeries = chart.addSeries("Year", dimple.plot.bubble, [xAxis, yAxis]);
bubbleSeries.minSize = 5;
bubbleSeries.maxSize = 50;

chart.draw();

这样就能实现按年份单独计算百分比的气泡图啦～

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