如何在Highchart的量規弧圖中更改長寬比和刪除間距

Question

[已解決，但第三個問題除外 ]

我正在使用highcharts構建量規弧圖。 我發現將所有空間都設置為0在圓弧圖中是不夠的，因為我要刪除的底部空間保留給了整個圓圖（而不是我的圓弧）。

如您所見，間距0可以正常工作，但是我也需要在底部減少未使用的空間。

另外，我發現我可以在所選的最小/最大值上下設置值。 因此，我想這就是保留間距的原因。

該值是從外部發送的（不知道發送了什么），因此我需要為此添加驗證。 我想知道是否有可能使用highcharts，還是應該事先做好准備？

最后，我希望此圖表通過更改其寬高比來采用其父容器的100％寬度和100％高度。 當然，我嘗試設置： chart.width = '100%' ，但是它不起作用。

因此，基本上，我可以在chart屬性中設置固定值，但是由於我將此屬性用作多個頁面上的組件，后來又在移動頁面上使用，因此我想確保它可以響應。

所以最后，當其中兩個相關時，我想在這里實現三件事（我想）：

1. 擺脫底部間距。
2. 忽略不符合我的最小-最大值的不受歡迎的值。
3. 根據容器的寬度/高度值更改長寬比。 [ 仍未解決 ]

這是我的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]
            }]

Answer 1

1。

嘗試將pane.size設置為200% ，將pane.center為['50%', '100%'] 。

現場演示： http ： //jsfiddle.net/BlackLabel/gs2rrmt1/

---

2。

Highcharts並未為此提供機制-提供驗證數據是用戶的責任。

---

3。

Highcharts圖表默認情況下會占據整個容器空間。