使 x 轴值与系列相同

Question

是否可以仅在 x 轴上显示系列数据？ 比如我有serie：

"data":[{"x":70000,"y":6.5354E7}, {{"x":71000,"y":5.5354E7}} ....]

我只想在 x 轴上提供 x 值。在默认设置下，轴上的值甚至有分数。

我尝试使用不同的选项，但没有任何成功。

Answer 1

您可以使用类别来完全控制 X 轴标签中显示的值。官方文档中有很多带有文本标签的示例，但也没有什么可以阻止您使用数字。它们只是标签。

而不是：

let options = {
  series: [
    {
      data: [{"x":70000,"y":6.5354E7}, {"x":71000,"y":5.5354E7}]
    }
  ]
  ...
};

你会：

let options = {
  series: [
    {
      data: [{"x":1,"y":6.5354E7}, {"x":2, "y":5.5354E7}]
    }
  ],
  xaxis: {
    categories: [70000, 71000]
  }
  ...
};

您可以通过迭代每个点并将每个唯一的 x 值存储到数组中来自动执行此操作。下面是一个例子：

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

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

<script>
function createCategories(series) {
  let unique = new Set();

  // Collects unique x coordinates.
  for (let serie of series) {
    for (let point of serie.data) {
      unique.add(point.x);
    }
  }


  // Creates categories
  let categories = Array.from(unique);

  // Sorts categories ascendantly.
  categories.sort((a, b) => a - b);

  return categories;
}

function replaceXCoordinatesWithCategories(series, categories) {
  for (let serie of series) {
    for (let point of serie.data) {
      point.x = categories.indexOf(point.x) + 1;
    }
  }
}

let series = [
  {
    data: [
      { x: 71000, y: 3.5354E7 },
      { x: 72000, y: 2.5354E7 },
      { x: 73000, y: 1.5354E7 },
      { x: 74000, y: 5.5354E7 },
      { x: 75000, y: 4.5354E7 },
      { x: 76000, y: 4.5354E7 },
    ]
  },
  {
    data: [
      { x: 71000, y: 6.5354E7 },
      { x: 72000, y: 5.5354E7 },
      { x: 73000, y: 4.5354E7 },
      { x: 74000, y: 3.5354E7 },
      { x: 75000, y: 2.5354E7 },
    ]
  }
];

let categories = createCategories(series);
replaceXCoordinatesWithCategories(series, categories);

let options = {
  series: series,
  chart: {
    height: 350,
    type: 'line'
  },
  xaxis: {
    categories: categories
  }
};

let chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
</script>