Как добавить настраиваемые элементы всплывающей подсказки в Apexcharts?

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

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

Сейчас я вижу только значение по умолчанию во всплывающей подсказке, то есть имя серии и значение y. Я хотел бы посмотреть:

  • Цена: (значение x)
  • Число: (значение y)
  • Продукт: 'название',
  • Информация: 'информация',
  • Сайт: 'name'

Как я могу добавить это во всплывающую подсказку? Вот что у меня получилось:

Fiddle: https://jsfiddle.net/9m0r2ont/1/

Код:

var options = {
  chart: {
    height: 380,
    width: "100%",
    type: "scatter",
  },
  series: [
    {
      name: "Series 1",
      data: [
        {
          x: 100,
          y: 50,
          product: 'name',
          info: 'info',
          site: 'name'
        },
        {
          x: 150,
          y: 55,
          product: 'name',
          info: 'info',
          site: 'name'
        }
      ]
    }
  ],
  xaxis: {
    type: "numeric"
  }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

javascript tooltip apexcharts
person Hejhejhej123    schedule 31.10.2020    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Попробуйте вот так:

var options = {
  chart: {
    height: 380,
    width: "100%",
    type: "scatter",
  },
  series: [
    {
      name: "Series 1",
      data: [
        {
          x: 100,
          y: 50,
          product: 'name',
          info: 'info',
          site: 'name'
        },
        {
          x: 150,
          y: 55,
          product: 'name',
          info: 'info',
          site: 'name'
        },
        {
          x: 130,
          y: 44,
          product: 'name',
          info: 'info',
          site: 'name'
        }
      ]
    }
  ],
  xaxis: {
    type: "numeric"
  },
  tooltip: {
    custom: function({series, seriesIndex, dataPointIndex, w}) {
      var data = w.globals.initialSeries[seriesIndex].data[dataPointIndex];
      
      return '<ul>' +
      '<li><b>Price</b>: ' + data.x + '</li>' +
      '<li><b>Number</b>: ' + data.y + '</li>' +
      '<li><b>Product</b>: \'' + data.product + '\'</li>' +
      '<li><b>Info</b>: \'' + data.info + '\'</li>' +
      '<li><b>Site</b>: \'' + data.site + '\'</li>' +
      '</ul>';
    }
  }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart">
</div>

Для этого вам необходимо добавить настраиваемую подсказку к объекту options. Получите доступ к объекту w, переданному в функцию, чтобы получить правильные данные. Аналогичный пример есть здесь. Как только вы сможете идентифицировать интересующие вас данные в этом объекте, используйте их, чтобы вернуть HTML-код для отображения во всплывающей подсказке.

person sbgib    schedule 31.10.2020