javascript - 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
解决方案
我终于明白了...
因此,对于 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, },
};
推荐阅读
- python - 表单验证重定向问题
- visual-studio - 单击/选择项目的 Visual Studio IDE 问题
- tfs - 如何在 TFS 中仅删除一个 Git 存储库?
- user-interface - 为什么 NPMInstall 不能构建这个 node-sass 依赖?
- reactjs - 使用 Apollo 客户端订阅时,当我们的身份验证令牌过期时,我们如何保持连接处于活动状态
- javascript - Javascript 模板文字中的日期格式
- apache-kafka - 如何在 Kafka Streams 应用程序中预热内存状态存储
- spring-boot - WebFlux + MongoDB + docker compose = 错误
- tensorflow - TfLite:为什么推荐 from_saved_model() 而不是 from_keras_model()?
- node.js - 将 node.js 加密代码转换为 dart