有没有办法将额外的数据传递给数据集并在 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
最佳答案
我终于明白了...
因此,对于 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/