Apexcharts折线与面积图仅在网格开启时显示Tooltip的问题求助
Apexcharts折线与面积图仅在网格开启时显示Tooltip的问题求助
大家好,我最近在用vue-apexcharts封装组件做图表时碰到了个头疼的问题,折腾了好几个版本组合(组件试过1.6.x和1.7.0,ApexCharts本体试过4.4.0和4.5.0)都没搞定,想请教下各位大佬!
我已经把图表的视觉样式自定义得差不多了,但现在卡在Tooltip的显示逻辑上:我想要鼠标悬停图表内容时,能弹出那种靠近悬停位置的默认漂亮Tooltip,但完全不想显示任何网格线。
我本来以为只要把配置里的tooltip.enabled设为true就能实现这个效果,可实际操作下来Tooltip根本不出来。后来摸索发现,必须把grid.show设为true,Tooltip才会正常显示。但如果我想隐藏y轴的网格横线,把grid.yaxis.lines.show设为false,Tooltip就又消失了;哪怕只开x轴网格线、关y轴,Tooltip倒是能出来,但又多了我不需要的竖线,还是达不到预期效果。
下面是我传给vue-apexcharts的配置对象(数据做了匿名处理):
series = [ { "name": "my y axis title", "data": [ [ 1659236400000, "74.83" ], [ 1659841200000, "83.75" ], [ 1660446000000, "318.74" ], // ... 省略中间匿名数据 [ 1665284400000, "296.60" ], [ 1665889200000, "200.08" ], [ 1666494000000, "192.09" ], ] } ] options = { "colors": [ "#9C27B0" ], "chart": { "type": "line", "toolbar": { "show": false }, "zoom": { "enabled": false } }, "fill": { "colors": [ "#9C27B0" ], "opacity": 0.8, "type": "solid" }, "grid": { // 要是关了grid或者同时关了两个轴的网格线,Tooltip就不显示了 "show": true, "xaxis": { "lines": { "show": false } }, "yaxis": { "lines": { "show": true } } }, "legend": { "show": false }, "tooltip": { // 就算删掉整个tooltip配置,只要开着grid,Tooltip还是能正常工作 "enabled": true, "intersect": false }, "annotations": { "yaxis": [], "xaxis": [], "points": [] }, "stroke": { "width": 2, "curve": "straight", "lineCap": "round" }, "xaxis": { "axisTicks": { "show": true }, "labels": { "show": true, "rotate": 0, "hideOverlappingLabels": true }, "convertedCatToNumeric": true }, "yaxis": { "max": 700, "min": 0, "title": { "text": "my axis title" }, "labels": {} } }
有没有大佬知道怎么配置才能让Tooltip正常显示,同时完全隐藏所有网格线呀?麻烦指点一下!
备注:内容来源于stack exchange,提问作者Bruno Lamps
相关产品推荐
相关产品推荐

