时间戳

首页 > 解决方案 > 调整大小时自定义仪表图不起作用

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

问题描述

我需要自定义仪表高图为 在此处输入图像描述

我将其定制为 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/

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

在此处输入图像描述

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

谢谢

标签： javascriptchartshighchartsgauge

解决方案

您可以动态计算和设置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

推荐阅读