Nuxt3中ApexChart箱线图与散点图组合显示问题求助

核心问题 #

• 是否可以将水平箱线图与散点图组合展示？
• 若水平箱线图无法实现该组合，如何在X轴为分类的垂直箱线图中完成相同需求？

问题背景 #

单独绘制箱线图可正常工作，但添加散点图后图表无法正常显示。

箱线图配置代码 #

const chartOptions = reactive({
  chart: {
    type: "boxPlot",
    toolbar: {
      show: true,
    },
  },
  title: {
    text: props.name,
    align: "center",
  },
  xaxis: {
    type: "category",
    categories: props.transitions,
  },
  tooltip: {
    enabled: true,
  },
  plotOptions: {
    bar: {
      horizontal: props.horizontal,
      barHeight: "50%",
    },
    boxPlot: {
      colors: {
        upper: tailwindColors.indigo["400"],
        lower: tailwindColors.indigo["100"],
      },
    },
  },
  stroke: {
    colors: [tailwindColors.gray["400"]],
  },
});

系列数据 #

[
    {
        "type": "boxPlot",
        "data": [
            {
                "x": "cat-1",
                "y": [
                    2.396,
                    2.396,
                    2.43,
                    2.451,
                    2.457
                ]
            },
            {
                "x": "cat-2",
                "y": [
                    1.053,
                    1.072,
                    1.082,
                    1.262,
                    1.32
                ]
            },
            {
                "x": "cat-3",
                "y": [
                    1.019,
                    1.021,
                    1.037,
                    1.045,
                    1.045
                ]
            },
            {
                "x": "cat-4",
                "y": [
                    1.265,
                    1.265,
                    1.271,
                    1.282,
                    1.284
                ]
            },
            {
                "x": "cat-5",
                "y": [
                    1.147,
                    1.164,
                    1.171,
                    1.333,
                    1.386
                ]
            },
            {
                "x": "Idle Time",
                "y": [
                    0.129,
                    0.13,
                    0.134,
                    0.136,
                    0.136
                ]
            }
        ]
    },
    {
        "type": "scatter",
        "data": [
            [
                "cat-1",
                1
            ],
            [
                "cat-1",
                1.353
            ],
            [
                "cat-1",
                3
            ],
            [
                "cat-2",
                0.02
            ],
            [
                "cat-2",
                3.566
            ],
            [
                "cat-2",
                5
            ],
            [
                "cat-3",
                0.01
            ],
            [
                "cat-3",
                11.121
            ],
            [
                "cat-4",
                0.1
            ],
            [
                "cat-4",
                0.297
            ],
            [
                "cat-4",
                3
            ],
            [
                "cat-4",
                5.142
            ],
            [
                "cat-5",
                4.585
            ],
            [
                "cat-5",
                5
            ],
            [
                "Idle Time",
                0.066
            ],
            [
                "Idle Time",
                3.5
            ]
        ]
    }
]

已尝试的散点数据格式 #

• 分类与数值组合的数组（如["cat-1", 1]）
• 数字与数值组合的数组（用分类索引代替分类名）
• {x: 分类, y: 数值}格式的对象

解决方案 #

1. 水平箱线图与散点图的组合实现 #

可以实现组合，但需调整轴配置和散点数据格式，适配水平箱线图的轴映射逻辑：

关键调整点：

• 当plotOptions.bar.horizontal = true时，箱线图的x对应数值轴，y对应分类轴，散点图数据需对应调整轴映射。
• 修改散点图数据为{x: 数值, y: 分类名}结构，同时在配置中明确双轴类型：

调整后的配置代码：

const chartOptions = reactive({
  chart: {
    type: "boxPlot",
    toolbar: {
      show: true,
    },
  },
  title: {
    text: props.name,
    align: "center",
  },
  // 明确轴类型：y轴为分类，x轴为数值
  yaxis: {
    type: "category",
    categories: props.transitions,
  },
  xaxis: {
    type: "numeric",
  },
  tooltip: {
    enabled: true,
  },
  plotOptions: {
    bar: {
      horizontal: props.horizontal, // 启用水平模式
      barHeight: "50%",
    },
    boxPlot: {
      colors: {
        upper: tailwindColors.indigo["400"],
        lower: tailwindColors.indigo["100"],
      },
    },
  },
  stroke: {
    colors: [tailwindColors.gray["400"]],
  },
});

调整后的散点图数据（x和y位置互换）：

{
    "type": "scatter",
    "data": [
        { "x": 1, "y": "cat-1" },
        { "x": 1.353, "y": "cat-1" },
        { "x": 3, "y": "cat-1" },
        // 其余散点数据按此格式调整
    ]
}

2. 垂直箱线图（X轴为分类）的组合实现 #

若水平模式仍有问题，垂直箱线图的组合更直接，只需确保散点图的x值与分类轴categories完全匹配，使用{x: 分类名, y: 数值}格式：

调整后的散点图数据：

{
    "type": "scatter",
    "data": [
        { "x": "cat-1", "y": 1 },
        { "x": "cat-1", "y": 1.353 },
        { "x": "cat-1", "y": 3 },
        // 其余散点数据保持此格式
    ]
}

配置注意事项：

• 确保xaxis.type = "category"且categories包含所有散点使用的分类值
• 无需修改轴映射关系，保持默认垂直箱线图配置即可

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