Question

我使用的是高图的实心规图表，似乎有缩放问题。基本问题是我想定义一个可以调整大小的图表，并希望该图表能够以最佳方式进行调整以适应空间。但是有时图表会延伸到容器外部，有时图表会比需要的小。

一个测试在jsFiddle here中进行。

该测试显示图表的各种版本：

图表测试[A] = pane.size = 100％/容器大小= 400px x 400px。
图表测试[B] = pane.size = 140％/容器大小= 400px x 400px。
图表测试[C] = pane.size = 100％/容器大小= 400px x 300px。
图表测试[D] = pane.size = 140％/容器大小= 400px x 300px。

使用的主要图表选项如下：

{
        chart: {
          type: 'solidgauge'
        },
        credits: false,
        title: {
          text: 'Solid Gauge'
        },
        yAxis: {
          minorTickInterval: null,
          min: 0,
          max: 100
        },
        pane: {
          center: ['50%', '85%'],
          size: '140%', // ISSUE: problem scaling chart outside container
          //size: '100%', // ISSUE: problem with gap above gauge
          startAngle: -90,
          endAngle: 90,
          background: {
            innerRadius: '60%',
            outerRadius: '100%',
            shape: 'arc'
          }
        },
        plotOptions: {
          solidgauge: {
            dataLabels: {
              y: 5,
              decimalPlaces: 1,
              units: 'rpm',
              borderWidth: 0,
              useHTML: true,
              format: '<div style="text-align:center"><span style="font-size:25px;color:' +
                ('black') + '">{point.y:.11f}</span><br/>' +
                '<span style="font-size:12px;color:silver">rpm</span></div>'
            }
          }
        },
        tooltip: {
          enabled: false
        }
      };

Chart [A]是可以的，但是如果我使用相同的窗格大小（100％）并减小高度（至300px）以消除标题和图表之间的间隙，那么我得到[C]，其中图表缩小得太小。同样，chart [D]可以，但是如果我使用相同的窗格大小（140％）并增加高度（至400px），则图形将扩展到容器外部，如[B]所示。

我是否缺少可以用来解决此问题的选项，还是我必须根据容器大小动态调整图表（我要避免）？

Answer 1

您可以在highcharts论坛上阅读以下内容：https://www.highcharts.com/forum/viewtopic.php?t=33070

从角规创建实体量规。背景是其中之一使图表看起来像弧形实心规的关键元素。如果禁用它，您将看到用于内半径和计算玻璃的外部半径以及尺寸或中心圆，但是圆弧用于可视化。

因此，删除startAngle和endAngle以查看图表的缩放比例。如您所见，它被缩放为圆形，而圆弧仅用于可视化。这就是为什么由于实体尺寸的体系结构而使它如此奇怪的原因。

演示：

https://jsfiddle.net/BlackLabel/mtevb2d3/

为什么highcharts实体表无法按预期方式缩放？

1 个答案: