2016-10-12 5 views
0

Я новичок в Highcharts и просто работаю с guage.Индикатор Highcharts неправильно отображают значения меток

Я изменил максимальное значение до 24 и установить значение данных до 20.

$('#container-speed').highcharts(Highcharts.merge(gaugeOptions, { 
    yAxis: { 
     min: 0, 
     max: 24, 
     title: { 
      text: 'Test ABC' 
     } 
    }, 

    credits: { 
     enabled: false 
    }, 

    series: [{ 
     name: 'Speed', 
     data: [20], 
     dataLabels: { 
      format: '<div style="text-align:center"><span style="font-size:25px;color:' + 
       ((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' + 
        '<span style="font-size:12px;color:silver">83% visited</span></div>' 
     }, 
     tooltip: { 
      valueSuffix: ' visited' 
     } 
    }] 

})); 

Однако датчик отображает с максимальным значением 40 и датчика на 50% (20/40) ,

Image here

Я предполагаю, что я делаю глупую ошибку где-то, я не могу видеть, что ... любая помощь будет оценена.

http://jsfiddle.net/fzsy2mhk/

Спасибо,

+0

Вместо того чтобы устанавливать ваш 'tickAmount' к ** 1 **, установите' tickInterval' к ** 24 **. Вы сказали, чтобы он сделал один тик, но не дал ему интервала, поэтому он выбрал свой собственный интервал. – jlbriggs

ответ

0

От Highcharts API:

Если tickAmount установлен, то ось может быть расширена за пределы установленного максимального для того, чтобы достичь заданного количества тиков.

Таким образом, вы должны удалить tickamount от gaugeOptions.

С тех пор, как вы включили labels в yAxis, указатель будет иметь автоматические метки в тиках. Вы можете отключить его, используя enabled:false, или настроить с помощью опции step.

Рабочая JSFiddle here