隐藏导航选项卡中未正确绘制的textAccessible标签RGraph栏

Question

我正在使用JS RGraph在HTML5网页上创建水平条形图。标签的文本非常模糊，除非您将textAccessible属性设置为true。该属性在页面上使用绝对坐标。

当我试图在导航选项卡下创建一个隐藏的图形(我使用引导和自定义的CSS代码)时，我的问题(图文标签相加在一起)就出现了。该选项卡需要在页面加载时处于活动状态(style="display:flex")，以使图形成为正确绘制，但它不是主选项卡，因此不能被赋予active属性。如果选项卡在页面加载(style="display:none")上没有活动，标签就不会正确绘制(因为我假设没有坐标)。

有没有办法解决这个问题？每当选项卡处于活动状态时，我都会尝试ReDraw图形，但是我无法让它工作。我在下面添加了代码的一部分：

带有选项卡非活动的html代码

<div class="tab-pane fade" id="nav-5" role="tabpanel" aria-labelledby="nav-5-tab"> <canvas id="hbar1" width="450" height="300">[No canvas support]</canvas> </div>

带有选项卡active的html代码

<div class="tab-pane fade active" id="nav-5" role="tabpanel" aria-labelledby="nav-5-tab"> <canvas id="hbar1" width="450" height="300">[No canvas support]</canvas> </div>

HBar图的JS码

hbar1 = new RGraph.HBar({ id: 'hbar1', data: data1, options: { backgroundGrid: false, xaxis: false, xaxisScaleMax: 100, xaxisScaleDecimals: 1, xaxisScale: false, labelsAboveUnitsPost: '%', colors: ['#019b91'], yaxisLabels: labels1, yaxisTickmarksCount: 0, labelsAbove: true, textAccessible: true } }).wave();

Answer 1

在绘制图表之前尝试重新设置画布(每次显示选项卡时)。

RGraph.reset(hbar1.canvas);