Настройка масштабирования калибровочных диаграмм с использованием C3.JS

Question

Я пытаюсь настроить масштабирование диаграммы C3, чтобы минимальное значение равно 50, максимальное значение равно 100, а переданное значение равно 75. В моем ментальной модели, которая должна заставить дугу двигаться с левой стороны на полпути через датчик (от 50 до 75). Однако вместо этого дуга появляется в середине, а значение, рассчитанное, равно 50? Я предполагаю, что значение равно 50, потому что 75 находится на полпути между 50-100, но я не знаю, как заставить дугу выглядеть правильно.

http://jsfiddle.net/8o4mqjf4/

Я думаю, что дуга должна пройти весь путь от левой ровно посередине.

var chart = c3.generate({ 
    bindto: "#gauge", 
    data: { 
     columns: [ 
      ['data', 75.0] 
     ], 
     type: 'gauge', 
    }, 
    gauge: { 
     min: 50, 
     max: 100 
    }, 
    color: { 

    } 
}); 

Answer 1

Ваша ментальная модель правильная. Манометр отображается не так, как вы ожидаете, потому что он показывает соотношение по умолчанию. Используйте значения меток и форматов, чтобы отобразить это значение:

var chart = c3.generate({ 
    bindto: "#gauge", 
    data: { 
     columns: [ 
      ['data', 75.0] 
     ], 
     type: 'gauge', 
    }, 
    gauge: { 
     label: { 
      format: function(value, ratio) { 
       return value; 
      } 
     }, 
     min: 50, 
     max: 100 
    }, 
    color: { 

    } 
});