ApexCharts 散点图，x 轴上有类别，每个类别有多个 y 值

Question

我正在尝试使用 Vue3 使用 ApexCharts 创建散点图。我的图表将在 x 轴上有几个不同的类别，每个类别将有多个 y 值。但是，我无法弄清楚如何正确格式化我的数据来实现这一点。图表的理想外观应该类似于为每个类别垂直堆叠的一堆数据点。 （不是直接在彼此之上，它们的 y 值都略有不同）

参考这里的文档后：https://apexcharts.com/docs/series/

我尝试了几种不同的方法来格式化我的数据。

我试过这种方式：

   let series = [
      {
        name: "Name 1",
        data: [10, NaN, NaN],
      },
      {
        name: "Name 1",
        data: [20, NaN, NaN],
      },
      {
        name: "Name 2",
        data: [NaN, 30, NaN],
      },
      {
        name: "Name 2",
        data: [NaN, 35, NaN],
      },
      {
        name: "Name 3",
        data: [NaN, NaN, 45],
      },
      {
        name: "Name 3",
        data: [NaN, NaN, 55],
      },
    ];

let chartOptions = {
   xaxis: {
      categories: ["cat1", "cat2", "cat3"]

这里的结果不允许我为每个类别添加一个以上的值。

接下来，我试过这样的：

    let series = [
      {
        name: "name1",
        data: [
          { x: "cat1", y: 54 },
          { x: "cat1", y: 60 },
          { x: "cat2", y: 66 },
          { x: "cat2", y: 70 },
        ],
      },
       {
         name: "name2",
         data: [
           { x: "cat3", y: 33 },
           { x: "cat3", y: 40 },
           { x: "cat4", y: 54 },
           { x: "cat4", y: 58 },
         ],
       },

   let chartOptions = {
   xaxis: {
      type: "category"

这里的结果是 x 轴上的两个类别，表示“cat1”，每个类别都有一个来自 name1 和 name2 的数据点

我还没有找到任何 Apex 散点图示例来显示具有多个 y 值的类别数据的这种特殊情况，我只是不确定我的数据格式有什么问题。我已经能够达到预期的结果，但前提是我在 x 轴上使用成对的数值或日期时间。

任何帮助将非常感激！

Answer 1

如果您避免在同一系列中重复，则同一类别可以有多个点。

let options = {
  series: [{
    name: 'name1',
    data: [
      { x: 'cat1', y: 54 },
      { x: 'cat2', y: 66 },
      { x: 'cat3', y: 33 },
      { x: 'cat4', y: 54 }
    ]
  }, {
    name: 'name2',
    data: [
      { x: 'cat1', y: 60 },
      { x: 'cat2', y: 70 },
      { x: 'cat3', y: 40 },
      { x: 'cat4', y: 58 }
    ]
  }],
  chart: {
    height: 350,
    type: 'scatter'
  },
  xaxis: {
    type: 'category'
  }
};

let chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<div id="chart"></div>

---

编辑

如果您调整数据并将明确的类别添加到 xaxis，您可以得到：

let options = {
  series: [{
    name: 'name1',
    data: [
      [1, 54],
      [1, 60],
      [2, 66],
      [2, 70]
    ]
  }, {
    name: 'name2',
    data: [
      [3, 33],
      [3, 40],
      [4, 54],
      [4, 58]
    ]
  }],
  chart: {
    height: 350,
    type: 'scatter'
  },
  xaxis: {
    categories: ['cat1', 'cat2', 'cat3', 'cat4']
  }
};

let chart = new ApexCharts(document.querySelector('#chart'), options);
chart.render();

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<div id="chart"></div>