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 的类型切换。理解这一设计逻辑，可避免大量无效调试，高效实现专业级水平堆叠可视化。