使x轴值与系列相同

如何解决使x轴值与系列相同

是否可以在x轴上仅显示序列数据？ 例如，我有意甲：

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

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

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

解决方法

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

代替：

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

您将拥有：

let options = {
  series: [
    {
      data: [{"x":1,{"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,]
  },{
    data: [
      { x: 71000,y: 6.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>