Apexcharts，如何找到线上最高和最低标记的位置值，以便我可以将图像添加到该特定标记？

Question

我想在图表中添加箭头，我猜如果我能找到最高标记的位置，我可以用它来添加一些 html 以获得一些自定义工具提示或标记。我试着寻找一种格式 在标记和轴中发挥作用，我只是不确定我在这里寻找什么。任何帮助深表感谢。我一直无法解决这个问题。

Answer 1

该功能是一个 WIP，我正在创建示例来说明该功能。

该功能的建议 API 如下所示

 var options = {
  chart: {
    height: 350,
    type: "area",
    events: {
      mounted: function(ctx, config) {
        const lowest = ctx.getLowestValueInSeries(0)
        const highest = ctx.getHighestValueInSeries(0)

        ctx.addPointAnnotation({
          x: new Date(ctx.w.globals.seriesX[0][ctx.w.globals.series[0].indexOf(lowest)]).getTime(),
          y: lowest,
          label: {
            text: 'Lowest: ' + lowest,
            offsetY: 2
          },
          customSVG: {
              SVG: `<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
              <path d="M0 0h24v24H0z" fill="none"/>`,
              cssClass: undefined,
              offsetX: -10,
              offsetY: -30
          }
        })

        ctx.addPointAnnotation({
          x: new Date(ctx.w.globals.seriesX[0][ctx.w.globals.series[0].indexOf(highest)]).getTime(),
          y: highest,
          label: {
            text: 'Highest: ' + highest,
            offsetY: 2
          },
        })
      }
    }
  },
  dataLabels: {
    enabled: false
  }
}

这将产生以下结果

该功能在 ApexCharts 当前版本 (3.5.1) 中不可用，但很快将在本周末(2019 年 3 月 10 日)发布的 3.6.0 中添加。

免责声明:我是 ApexCharts 的创建者