如何将Angular Apex Charts垂直箱线图改为水平并显示异常值？

问题描述 #

1. 我使用的是带散点异常值的垂直箱线图，按照官方文档设置plotOptions.bar.horizontal: true后，无法将图表转为水平显示，想问该示例是否支持水平模式？
2. 改用官方水平箱线图示例后，添加散点系列实现异常值时，异常点无法正常渲染，我的代码如下：

import { Component, ViewChild } from "@angular/core";

import {
  ChartComponent,
  ApexChart,
  ApexPlotOptions,
  ApexTitleSubtitle,
  ApexAxisChartSeries,
  ApexStroke
} from "ng-apexcharts";

export type ChartOptions = {
  series: ApexAxisChartSeries;
  chart: ApexChart;
  title: ApexTitleSubtitle;
  plotOptions: ApexPlotOptions;
  stroke: ApexStroke;
};

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  @ViewChild("chart") chart: ChartComponent;
  public chartOptions: Partial<ChartOptions>;

  constructor() {
    this.chartOptions = {
      series: [
        {
          name:'box',
          type:'boxPlot',
          data: [
            {
              x: "Category A",
              y: 54
            }
          ]
        },
        {
          name:'outlier',
          type:'scatter',
          data: [
            {
              x: "Category A",
              y: 54
            }
          ]
        },
      ],

      chart: {
        height: 350,
        type: "boxPlot"
      },
      title: {
        text: "Horizontal BoxPlot Chart",
        align: "left"
      },
      plotOptions: {
        bar: {
          horizontal: true,
          barHeight: "50%"
        },
        boxPlot: {
          colors: {
            upper: "#e9ecef",
            lower: "#f8f9fa"
          }
        }
      },
      stroke: {
        colors: ["#6c757d"]
      }
    };
  }

  public generateDayWiseTimeSeries(baseval, count, yrange) {
    var i = 0;
    var series = [];
    while (i < count) {
      var y =
        Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;

      series.push([baseval, y]);
      baseval += 86400000;
      i++;
    }
    return series;
  }
}

解决方案 #

问题1：垂直箱线图转水平无效果 #

原带散点的垂直箱线图示例无法直接通过设置horizontal: true转为水平模式，因为其散点与箱线图的轴映射逻辑是基于垂直布局设计的。要实现带异常值的水平箱线图，需基于官方水平箱线图示例重新调整数据结构和配置，而非直接修改垂直示例。

问题2：水平箱线图异常值不渲染 #

你的代码有两个关键错误，导致异常值无法渲染：

1. 轴映射错误：水平箱线图中，分类标签在Y轴，数值在X轴，因此散点数据的x应为数值，y应为分类名称，与垂直模式相反。
2. 箱线数据格式错误：箱线图的data需传入包含x（分类）和y（箱线统计数组：[最小值, 下四分位数, 中位数, 上四分位数, 最大值]）的结构，而非单个数值。

修正后的完整代码：

import { Component, ViewChild } from "@angular/core";

import {
  ChartComponent,
  ApexChart,
  ApexPlotOptions,
  ApexTitleSubtitle,
  ApexAxisChartSeries,
  ApexStroke
} from "ng-apexcharts";

export type ChartOptions = {
  series: ApexAxisChartSeries;
  chart: ApexChart;
  title: ApexTitleSubtitle;
  plotOptions: ApexPlotOptions;
  stroke: ApexStroke;
};

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  @ViewChild("chart") chart: ChartComponent;
  public chartOptions: Partial<ChartOptions>;

  constructor() {
    this.chartOptions = {
      series: [
        {
          name:'box',
          type:'boxPlot',
          data: [
            // 正确的箱线数据格式：x为分类，y为[最小值, 下四分位数, 中位数, 上四分位数, 最大值]
            {
              x: "Category A",
              y: [30, 45, 54, 62, 70]
            }
          ]
        },
        {
          name:'outlier',
          type:'scatter',
          data: [
            // 水平模式下：x为异常值数值，y为对应分类
            {
              x: 80,
              y: "Category A"
            },
            {
              x: 25,
              y: "Category A"
            }
          ]
        },
      ],

      chart: {
        height: 350,
        type: "boxPlot"
      },
      title: {
        text: "Horizontal BoxPlot Chart with Outliers",
        align: "left"
      },
      plotOptions: {
        bar: {
          horizontal: true,
          barHeight: "50%"
        },
        boxPlot: {
          colors: {
            upper: "#e9ecef",
            lower: "#f8f9fa"
          }
        }
      },
      stroke: {
        colors: ["#6c757d"]
      }
    };
  }

  public generateDayWiseTimeSeries(baseval, count, yrange) {
    var i = 0;
    var series = [];
    while (i < count) {
      var y =
        Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;

      series.push([baseval, y]);
      baseval += 86400000;
      i++;
    }
    return series;
  }
}

关键修改说明 #

• 调整散点系列的x和y字段顺序，匹配水平箱线图的轴映射规则
• 修正箱线图数据格式，使用标准的五数统计数组定义箱线范围
• 保持plotOptions.bar.horizontal: true的正确配置，确保图表水平显示

内容的提问来源于stack exchange，提问作者Pedro Henrique Gomes