Пользовательская измерительная диаграмма не работает при изменении размера

Мне нужно настроить шкалу highchar как

Я настроил его как код 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/

Но когда я изменяю размер калибровочной диаграммы, она отображается не так хорошо, как

Меня беспокоит расчет ширины измерительной панели в соответствии со стилем.

Спасибо

Привет @Hien Nguyen, Вы хотите всегда сохранять первое кольцо, как в этом примере: jsfiddle.net/BlackLabel/eqdf8gzk?

— 11.12.2020 14:37

Я хочу всегда отображать как первое изображение, но когда я изменяю размер диаграммы, она отображается как второе изображение, это мне не нужно. Спасибо

— 11.12.2020 16:41

Пожалуйста, проверьте приведенный ниже пример и дайте мне знать, соответствует ли он вашим требованиям: jsfiddle.net/BlackLabel/vbctd9ef

— 14.12.2020 11:17

Спасибо, ppotaczek, ваша ссылка помогает нам!

— 16.12.2020 01:54

javascript charts highcharts gauge

11.12.2020 07:32

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

292

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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

16.12.2020 11:20