使用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: { 

    } 
});