Javascript 如何在Highchart'中更改纵横比并删除间距；s规弧图

[已解决，第三个问题除外

我正在使用highcharts构建一个量规弧图。我发现在圆弧图表中，将所有空格设置为0是不够的，因为我要删除的底部空格保留给了一个完整的圆图表（而不是我的圆弧）

正如你所看到的，间距0可以很好地工作，但我需要在底部削减未使用的空间以及

此外，我发现我可以将值设置为高于或低于所选的最小/最大值。所以，我想这就是保留间距的原因

该值是从外部发送的（不知道发送了什么），因此我需要为此添加验证。我想知道是否可以使用highcharts，或者我是否应该事先处理这个问题

最后，我希望此图表通过更改其纵横比，获得其父容器的100%宽度和100%高度。当然，我试过设置：

chart.width='100%

，但它不起作用

因此，基本上，我可以在图表属性中设置固定值，但是因为我在几个页面上使用它作为组件，然后在移动页面上使用它，所以我希望确保它能够响应

最后，我想在这里实现三件事，其中两件是相关的（我猜）：

去掉底部间距

忽略偏离最小最大值的不受欢迎的值

根据容器的宽度/高度值更改纵横比。[仍未解决]

这是我的JSON：

 chart: {
                type: 'gauge',
                backgroundColor: '#00f',
                //padding: 0,
                //margin: 0,
                //spacing: 0,
                //whiteSpace: 0
                plotBackgroundColor: null,
                plotBackgroundImage: null,
                plotBorderWidth: 0,
                plotShadow: false,
                spacingTop: 0,
                spacingLeft: 0,
                spacingRight: 0,
                spacingBottom: 0,
                borderWidth: 0
            },

            title: {
                text: ''
            },

            pane: {
                startAngle: -90,
                endAngle: 90,
                size: '100%',

                background: {
                    backgroundColor: {
                        linearGradient: [0, 0, 400/*300*/, 0],
                        stops: [
                          [0.5, '#f00'], // red
                          [0.9, '#ff0'], // orange
                          [1, '#0f0'], // green
                        ]
                    },
                    borderWidth: 0,
                    innerRadius: '70%',
                    outerRadius: '100%',
                    shape: 'arc'
                }
            },

            tooltip: {
                enabled: false
            },

            credits: false,

            plotOptions: {
                gauge: {
                    dial: {
                        radius: '90%',
                        backgroundColor: '#fff'
                    },
                    pivot: {
                        backgroundColor: 'none'
                    }
                },
                series: {
                    dataLabels: {
                        enabled: false
                    }
                }
            },

            yAxis: {
                min: -100,
                max: 100,
                lineWidth: 0,
                minorTickInterval: null,
                tickLength: 0,
                labels: {
                    enabled: false
                }
            },

            series: [{
                name: 'percent',
                data: [_this.percentValue]
            }]

1.

尝试将

pane.size

设置为

200%

并将

pane.center

设置为

['50%'，'100%]

现场演示：

---

2.

Highcharts并没有为此提供机制——用户有责任提供经过验证的数据

---

3.

---

默认情况下，Highcharts图表会占用整个容器空间。

效果很好，谢谢。唯一没有解决的问题是纵横比。我需要它匹配任何已设置高度的100%宽度。为了测试是否可能，我尝试在图表的属性中设置固定值，但什么也没发生：您的solidgauge是一个半圆。如果仅当容器宽度正好是其高度的两倍时才接触容器边缘：对于响应纵横比，请选中此小提琴：选中此小提琴：Highchart默认情况下将图表高度设置为400px。因此，诀窍是将图表的高度按百分比设置为180%