我正在使用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瓦尔非常低,我怀疑有什么东西覆盖了它。
1条答案
按热度按时间ar7v8xwq1#
这种截断的原因是您有一个不寻常的
subtitle
。它很长,所以所有的图表元素都适合在屏幕上,solidgauge已经减少。您使用pane.size
强制它的大小加倍,因此负责绘制图表的逻辑将其解释为超出图的范围(如果您删除副标题,您可以看到这一点)。解决方案是设置subtitle.floating: true
,这是在像您这样的情况下推荐的,即它位于不同的位置,并且您不希望在其原始位置为其生成空间。Demo:https://jsfiddle.net/BlackLabel/8vhcg9zL/
API:https://api.highcharts.com/highcharts/subtitle.floating