Всплывающая подсказка Apexcharts - как добавить дополнительные данные для свечного графика?

Есть ли способ передать дополнительные данные в набор данных и отобразить их во всплывающей подсказке для свечей apexcharts?

Я не могу найти пример в документах: https://apexcharts.com/docs/options/tooltip/#custom

Я хотел бы отобразить всплывающую подсказку, например:

  • Открыть: xx.xx
  • Высокий: xx.xx
  • Низкий: xx.xx
  • Закрыть: xx.xx
  • extra_1: xx.xx
  • extra_2: xx.xx
  • extra_3: xx.xx
  • exta_4: xx.xx

введите описание изображения здесь


javascript charts apexcharts
person Akwinsky    schedule 24.06.2020    source источник
comment
В чем проблема с codepen.io/apexcharts/pen/NBdyvV?   -  person Reda Meskali    schedule 24.06.2020
comment
Нет проблемы, только я не могу понять, как передать дополнительные данные в набор данных и отобразить их во всплывающей подсказке. В этом примере я не вижу, как получить доступ к значениям свечей (у него 4 значения для одной временной метки), как передать дополнительные данные в набор данных и отобразить их во всплывающей подсказке диаграммы. Спасибо за комментарий.   -  person Akwinsky    schedule 24.06.2020
comment
series.data содержит ваши данные, а xaxis.categories содержит другие данные оси, заполните их своим набором данных, а затем используйте их внутри функции всплывающей подсказки, чтобы отобразить все, что вы хотите   -  person Reda Meskali    schedule 24.06.2020
comment
Не могли бы вы привести пример свечного графика с дополнительными данными во всплывающей подсказке?   -  person Akwinsky    schedule 25.06.2020

Ответы (1)


arrow_upward
6
arrow_downward

Я наконец понял ...

Итак, для свечной диаграммы Apexcharts - если вы хотите предоставить дополнительные данные и отобразить их во всплывающей подсказке:

  • передать данные в набор данных как описание

    {
  x: new Date(t),
  y: [o, h, l, c],
  description: {
    call_ask1: call_ask1,
    call_ask2: call_ask2,
    call_bid1: call_bid1,
    call_bid2: call_bid2,
    put_ask1: put_ask1,
    put_ask2: put_ask2,
    put_bid1: put_bid1,
    put_bid2: put_bid2,
    expiry1: expiry1,
    expiry2: expiry2,
  },
}

  • Всплывающая подсказка имеет настраиваемую функцию для отображения дополнительных данных:

     options.tooltip = {
  custom: function (opts) {
  const desc = opts.ctx.w.config.series[opts.seriesIndex].data[opts.dataPointIndex].description;
  // candlestick standard
  const open = opts.series[opts.seriesIndex][opts.dataPointIndex];
  const high = opts.series[opts.seriesIndex][opts.dataPointIndex + 1];
  const low = opts.series[opts.seriesIndex][opts.dataPointIndex + 2];
  const close = opts.series[opts.seriesIndex][opts.dataPointIndex + 3];
  // Extra tooltip data
  const call_ask1 = desc.call_ask1;
  const call_bid1 = desc.call_bid1;
  const put_ask1 = desc.put_ask1;
  const put_bid1 = desc.put_bid1;
  const expiry1 = new Date(desc.expiry1);

  const call_ask2 = desc.call_ask2;
  const call_bid2 = desc.call_bid2;
  const put_ask2 = desc.put_ask2;
  const put_bid2 = desc.put_bid2;
  const expiry2 = new Date(desc.expiry2);

  let text = "Open : " + open + "<br>";
  text += "High : " + high + "<br>";
  text += "Low : " + low + "<br>";
  text += "Close : " + close + "<br>";
  text += "<br>";
  text += "Call Ask 1 : " + call_ask1 + "<br>";
  text += "Call Bid 1 : " + call_bid1 + "<br>";
  text += "Put Ask 1 : " + put_ask1 + "<br>";
  text += "Put Bid 1 : " + put_bid1 + "<br>";
  text += "Straddle 1 : <br>";
  text +=
    "Days to exp 1 : " +
    Math.ceil(Math.abs(expiry2 - expiry1) / (1000 * 60 * 60 * 24)) +
    "<br>";

  text += "<br>";
  text += "Call Ask 2 : " + call_ask2 + "<br>";
  text += "Call Bid 2 : " + call_bid2 + "<br>";
  text += "Put Ask 2 : " + put_ask2 + "<br>";
  text += "Put Bid 2 : " + put_bid2 + "<br>";
  text += "Straddle 2 : <br>";
  text +=
    "Days to exp 2 : " +
    Math.ceil(Math.abs(expiry2 - expiry1) / (1000 * 60 * 60 * 24)) +
    "<br>";

  return text;
},
fillSeriesColor: false,
theme: "dark",
x: {
  show: true,
  format: "dd MMM yyyy",
},
fixed: {
  enabled: true,
  position: "topLeft",
  offsetX: 0,
  offsetY: 0,
},

    };

person Akwinsky    schedule 25.06.2020