Highchart 仪表图顶部被裁剪/隐藏

Question

我正在使用 Highcharts (https://www.highcharts.com/) 库来创建仪表图表

如您在上图中看到的，仪表图在顶部被裁剪。

以下是我用相同的方法创建的 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'
    }

如果我将 Chart.pane.center 更改为 ["50%", "80%"] [不这样做的原因：我不希望图表位于页面下方] 或将 Chart.pane.size 减小到“80%”，效果很好。 [不这样做的原因：我不想要更小的图表]

我看到 svg 是基于 val 创建的，但 zindex val 非常低 0.1 我怀疑有什么东西重叠了它。

Answer 1

这次截断的原因是你有一个不寻常的

subtitle

。它相当长，因此所有图表元素都适合屏幕，实体规格已减小。您使用

pane.size

强制其大小加倍，因此负责绘制图表的逻辑将其解释为超出了绘图范围（如果删除副标题，您可以看到这一点）。解决方案是设置

subtitle.floating: true

，建议在像您这样的情况下，它位于不同的位置，并且您不希望在其原始位置为其生成空间。

演示：https://jsfiddle.net/BlackLabel/8vhcg9zL/
API：https://api.highcharts.com/highcharts/subtitle.floating