Apexcharts, как мне найти позиционное значение для самого высокого и самого низкого маркера в строке, чтобы я мог добавить изображение к этому одному конкретному маркеру?

Я хотел бы добавить стрелки на диаграмму, я предполагаю, что если я смогу найти положение самого высокого маркера, я могу использовать его, чтобы добавить некоторый html, чтобы получить некоторые пользовательские подсказки или маркеры. Я попытался найти формат введите описание изображения здесь в маркерах и на оси, я просто не уверен, что я здесь ищу. Любая помощь горячо приветствуется. Я не мог осмыслить это.


apexcharts
person James Weeks    schedule 05.03.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Это 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
  }
}

что даст следующий результат Самая высокая / самая низкая точка

Эта функциональность недоступна в текущем выпуске (3.5.1) ApexCharts, но вскоре будет добавлена ​​в 3.6.0, который будет выпущен в эти выходные (10 марта 2019 г.).

Отказ от ответственности: я создатель ApexCharts

person junedchhipa    schedule 06.03.2019
comment
Да, это будет. Вместо того, чтобы вызывать вышеуказанные функции после chart.render (), вы вызовете их в событии «смонтировано» ApexCharts. Я приведу пример на сайте. - person junedchhipa; 07.03.2019
comment
Выпущено 3.6.0. Также обновлен приведенный выше ответ, чтобы его было проще интегрировать в код React / Vue. - person junedchhipa; 10.03.2019