时间戳

首页 > 解决方案 > Apex 图表时间轴 - 数据标签不与工具提示和标题同步

label - Apex 图表时间轴 - 数据标签不与工具提示和标题同步

问题描述

我们正在使用 ApexCharts 时间线。我们使用系列来显示项目的持续时间。一切似乎都很好，但我们遇到了宽度数据标签的问题。

数据标签与工具提示和标题不同步。

第一个系列还行...

series: [
{
  name: "AMISOC",
  data: [
    {
      x: "Gestion des mesures d'intégration",
      y: [new Date("2020-06").getTime(), new Date("2021-06").getTime()],
    },
    {
      x: "Portefeuilles + validations - Stabilisation",
      y: [new Date("2020-06").getTime(), new Date("2021-06").getTime()],
    },
    {
      x: "Stat OFS AMIG - lot 3",
      y: [new Date("2020-06").getTime(), new Date("2021-04").getTime()],
    },
    {
      x: "Test 3  VZA",
      y: [new Date("2021-01").getTime(), new Date("2022-03").getTime()],
    }
  ]
},
{
  name: "FE",
  data: [
    {
      x: "Trafic des paiements (lot 2)",
      y: [new Date("2020-06").getTime(), new Date("2021-06").getTime()],
    }
  ]
},
{
  name: "IT",
  data: [
    {
      x: "Migration Windows et Outils bureautique",
      y: [new Date("2021-03").getTime(), new Date("2021-06").getTime()],
    },
    {
      x: "Upgrade technique Infrastucture 2021",
      y: [new Date("2021-01").getTime(), new Date("2021-12").getTime()],
    }
  ]
},

...

],

意甲OK

但在标题之后没有跟随相关的标题名称。在工具提示中可以，但在 dataLabel 中不行。

有人看到我们做错了吗？

系列不同步

这是一个 Codepen：https ://codepen.io/vinchoz/pen/rNjOKwv

标签： labeltimelineapexcharts

解决方案

我确实找到了一个可行的解决方案：

我替换此代码

formatter: function (val, opt) {
  return opt.w.globals.labels[opt.dataPointIndex];
},

通过这段代码

formatter: function(val,obj) {
    return obj.w.config.series[obj.seriesIndex].data[obj.dataPointIndex].x;
},

https://codepen.io/vinchoz/pen/onBLOaB

推荐阅读