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

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