Question

[已解决，除第3个问题]

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

正如您所看到的，间距0工作正常，但我也需要在底部切割未使用的空间。

此外，我发现我可以在我选择的最小/最大值之上和之下设置值。所以，我猜这就是保留间距的原因。

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

最后，我希望此图表通过更改其纵横比来获取其父容器的100％宽度和100％高度。当然，我尝试设置：chart.width = '100%'，但它不起作用。

所以基本上，我可以在图表属性中设置固定值，但因为我在多个页面上使用它作为一个组件，后来在移动页面上，我想确保这将是响应。

所以最后，我想在这里实现3件事，其中2件是相关的（我猜）：

摆脱底部间距。
忽略偏离我的最小值最大值的不受欢迎的值。
根据容器的宽度/高度值更改纵横比。 [仍未解决]

这是我的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图表默认占用整个容器空间。

如何在Highchart的仪表弧形图中更改纵横比并删除间距

1 个答案: