调整大小时自定义仪表图表不起作用

Question

我需要自定义仪表高图作为

我将其定制为 jsfiddle 代码。

var gaugeOptions = {

    chart: {

        type: 'solidgauge'

    },

    title: null,

    pane: {

        center: ['50%', '85%'],

        size: '140%',

        startAngle: -90,

        endAngle: 90,

        background: {

            backgroundColor:

                Highcharts.defaultOptions.legend.backgroundColor || '#EEE',

            innerRadius: '60%',

            outerRadius: '100%',

            shape: 'arc'

        }

    },

    exporting: {

        enabled: false

    },

    tooltip: {

        enabled: false

    },

    // the value axis

    yAxis: {            

        stops: [

            [0.1, '#55BF3B'], // green

            [0.5, '#DDDF0D'], // yellow

            [0.9, '#DF5353'] // red

        ],

        

        

        lineWidth: 2,

        tickWidth: 10,

        tickInterval: 10,        

        lineColor: '#fff',    

        

        minorTickInterval: null,        

        labels: {

            enabled: false

        },

        minorTickPosition: 'inside',

        tickPosition: 'inside',        

        tickPixelInterval: 10,

        tickLength: '50',        

        tickColor: '#fff',

        zIndex: 6,

        

        minorTickWidth: 0,        

    },

        plotOptions: {

        solidgauge: {

            dataLabels: {

                enabled: false

            },            

            rounded: false

        },

         gauge: {

            dial: {

                radius: '40',

                backgroundColor: '#1d96e0',

                baseWidth: 20,

                topWidth: 1,

                baseLength: '5%', // of radius

                rearLength: '0%'

            },

            pivot: {

                    radius: '10',

                backgroundColor: '#1d96e0'

            }

        },

         series: {

            dataLabels: {

                enabled: true

            }

        }

    },

};

https://jsfiddle.net/viethien/9L4xcho3/5/

但是当我调整仪表图表的大小时，它显示得不好

我担心计算仪表板的宽度以适应风格。

Answer 1

您可以动态计算和设置tickLength轴的属性：var allowChartUpdate = true;var gaugeOptions = {  chart: {    type: 'solidgauge',    events: {      render: function() {        var tickLength = this.pane[0].group.getBBox().width / 4        if (allowChartUpdate) {          allowChartUpdate = false;          this.yAxis[0].update({            tickLength: tickLength          });          allowChartUpdate = true;        }      }    }  }}现场演示： https: //jsfiddle.net/BlackLabel/vbctd9ef/API 参考： https://api.highcharts.com/class-reference/Highcharts.Axis#update