gpt4 book ai didi

javascript - Apexcharts 工具提示 - 如何为烛台图表添加额外数据?

转载 作者:行者123 更新时间:2023-12-05 08:30:47 25 4
gpt4 key购买 nike

有没有办法将额外的数据传递给数据集并在 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

enter image description here

最佳答案

我终于明白了...

因此,对于 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,
    },

    };

关于javascript - Apexcharts 工具提示 - 如何为烛台图表添加额外数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62552227/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com