highcharts Highchart Jmeter 图顶部被裁剪/隐藏

i5desfxk  于 2023-10-20  发布在  Highcharts
关注(0)|答案(1)|浏览(107)

我正在使用Highcharts(https://www.highcharts.com/)库创建 Jmeter 图
Cropped Gauge chart
正如你在上面的图片中看到的, Jmeter 图在顶部被裁剪。
下面是我用同样的方法创建的JS Fiddle:
https://jsfiddle.net/4txnmdyp/3/

pane: {
    center: ['50%', '60%'],
    size: '200%',
    startAngle: -90,
    endAngle: 90,
    background: {
      backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
      innerRadius: '60%',
      outerRadius: '100%',
      shape: 'arc'
    }

如果我将www.example.com更改chart.pane.center为[“50%",“80%"] [不这样做的原因:我不希望图表在页面中更低]或将chart.pane.size减小到“80%”,它工作正常。[不这样做的原因:我不想要更小的图表]
我看到svg是基于瓦尔创建的,但是zindex瓦尔非常低,我怀疑有什么东西覆盖了它。

ar7v8xwq

ar7v8xwq1#

这种截断的原因是您有一个不寻常的subtitle。它很长,所以所有的图表元素都适合在屏幕上,solidgauge已经减少。您使用pane.size强制它的大小加倍,因此负责绘制图表的逻辑将其解释为超出图的范围(如果您删除副标题,您可以看到这一点)。解决方案是设置subtitle.floating: true,这是在像您这样的情况下推荐的,即它位于不同的位置,并且您不希望在其原始位置为其生成空间。

Demohttps://jsfiddle.net/BlackLabel/8vhcg9zL/
APIhttps://api.highcharts.com/highcharts/subtitle.floating

相关问题