canvasjs 默认的 stackedcolumn 类型生成垂直堆叠柱状图；若需水平堆叠效果，应改用 stackedbar 类型，并配合 axisx/axisy 的合理配置，而非依赖 reversed 属性——该属性仅控制坐标轴刻度方向，无法改变图表类型布局。
canvasjs 默认的 stackedcolumn 类型生成垂直堆叠柱状图；若需水平堆叠效果，应改用 stackedbar 类型，并配合 axisx/axisy 的合理配置，而非依赖 reversed 属性——该属性仅控制坐标轴刻度方向，无法改变图表类型布局。
在 CanvasJS 中，“反转图表”常被误解为将垂直堆叠柱状图（stacked column）转为水平方向。但需明确：reversed: true 仅影响坐标轴数值顺序（例如使 Y 轴从上到下递增），并不能将柱状图（column）转换为条形图（bar）。真正决定图表方向的是 type 属性——stackedColumn 始终沿 X 轴垂直堆叠，而 stackedBar 才沿 Y 轴水平堆叠。
要实现题中所需的水平堆叠条形图（即各区域数据横向拼接、类别标签垂直排列），关键步骤如下：
✅ 1. 将 data.type 由 "stackedColumn" 改为 "stackedBar"
这是最核心的修改。CanvasJS 中 stackedBar 专为水平堆叠设计，自动交换坐标系逻辑：X 轴变为数值轴（显示数值），Y 轴变为分类轴（显示 label，如 "2006"）。
✅ 2. 调整坐标轴配置以适配水平布局
- axisX 应保留数值刻度（用于显示 Y 值总和），通常无需 reversed: true；
- axisY 应启用标签并合理设置样式（因类别信息现位于 Y 轴）；
- 移除不必要的 labelFormatter 隐藏逻辑，确保年份标签可见。
✅ 3. 数据结构保持不变
所有 $dataPointsN 数组格式完全兼容 stackedBar，无需调整 label 或 y 字段。
以下是修正后的完整 JavaScript 配置示例（仅展示关键 chart 初始化部分）：
var chart = new CanvasJS.Chart("chartContainer", {
theme: "light2",
animationEnabled: true,
toolTip: {
shared: true
},
axisX: {
title: "Capacity (MW)", // X 轴现在显示数值
gridThickness: 1,
lineThickness: 1
},
axisY: {
title: "Year",
gridThickness: 0,
lineThickness: 0,
labelFontSize: 14
// 注意：无需 reversed，也不需隐藏 label
},
legend: {
cursor: "pointer",
itemclick: toggleDataSeries
},
data: [
{
type: "stackedBar", // ✅ 关键修改：stackedBar 替代 stackedColumn
name: "Europe",
showInLegend: true,
yValueFormatString: "#,##0 MW",
dataPoints: <?php echo json_encode($dataPoints1, JSON_NUMERIC_CHECK); ?>
},
{
type: "stackedBar",
name: "Asia-Pacific",
showInLegend: true,
yValueFormatString: "#,##0 MW",
dataPoints: <?php echo json_encode($dataPoints2, JSON_NUMERIC_CHECK); ?>
},
// ... 其余 series 同理，全部 type: "stackedBar"
{
type: "stackedBar",
name: "Rest of the world",
showInLegend: true,
yValueFormatString: "#,##0 MW",
dataPoints: <?php echo json_encode($dataPoints6, JSON_NUMERIC_CHECK); ?>
}
]
});⚠️ 注意事项：
- reversed: true 在 axisX 或 axisY 中仅翻转刻度顺序（如 Y 轴从“2006”在上变为在下），不改变图形朝向，切勿将其误用作“转水平”的手段；
- 若需多类别（如多个年份），stackedBar 会自动按 label 分组并在 Y 轴并排显示，符合典型水平堆叠需求；
- 确保引入 CanvasJS 库版本 ≥ 1.7（推荐使用最新版 https://canvasjs.com/assets/script/canvasjs.min.js），以获得完整 stackedBar 支持；
- 如需进一步美化，可添加 indexLabel 显示每段数值，或通过 color 字段自定义各区域颜色。
总结：CanvasJS 图表方向由 type 决定，而非 reversed。从垂直堆叠到水平堆叠，本质是 stackedColumn → stackedBar 的类型切换。理解这一设计逻辑，可避免大量无效调试，高效实现专业级水平堆叠可视化。
