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

Question

我需要自定义 gauge highchart 作为

我把它定制成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

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

Custom gauge chart not working when resize

javascript

charts

highcharts

gauge