在c3量表中顯示大於100的百分比值

我想使用這樣的C3.js庫來顯示當前進度的圖表。但是我不支持C3.js中的徑向進度我嘗試使用量表http://c3js.org/samples/chart_gauge.html ，但對於大於100％的所有值，它僅顯示100％。這裏是小提琴https://jsfiddle.net/iamaditya/pmgyx58t/在c3量表中顯示大於100的百分比值

var chart1 = c3.generate({ 
bindto: '#test', 
data: { 
    columns: [ ['data', 150] ], 
    type: 'gauge' 
}

}）

有沒有什麼辦法可以做到這一點？在此先感謝。

來源

2017-09-19 Aditya Sharma

您可以用計量對象的生成方法改變最大值：

var chart1 = c3.generate({ 
    bindto: '#test', 
    data: { 
     columns: [ ['data', 150] ], 
     type: 'gauge'   
    }, 
    gauge: { 
     max: 200 
    } 
})

我在這裏更新您的提琴：https://jsfiddle.net/pmgyx58t/1/

來源

2017-09-19 09:50:58 MattjeS

感謝您的評論，但對於像銷售目標，利潤等實際數據最大值可能會有所不同，在0-100範圍內顯示超過100％的數字將不可行。我的意思是說，像我們在徑向進展中所能做的那樣，必須有某種方法可以展現150％。 –

我不太確定你可以使用量表來實現這一點。如果它是200％，你希望展示什麼？我想你可以展示兩個戒指，你可能需要擴展c3來支持你在找的東西，因爲我不認爲它會開箱即用。我會看看你，雖然 – MattjeS

確切地說，它應該有多個弧以上的情況下，超過100％。我怎樣才能擴展C3庫？有沒有任何文件？ –

改變這種

data: { 
     columns: [ ['data', 150] ], 
     type: 'gauge' 
    }

到

data: { 
    columns: [ ['data', yScale(150)] ], 
    type: 'gauge' 
}

添加此功能，但你必須deffine數據最小值最大值COS餅圖僅追加對百分比平均值爲0 - 100

var yScale = d3.scale.linear() 
 
        .domain([100,500])//min max your data 
 
        .range([0,100])// this fix falue mean this is a percentage you must define your data min max and convert it 
 
     
 
    console.log(yScale(150))

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

來源

2017-09-19 10:00:13 KEKUATAN

在c3量表中顯示大於100的百分比值

回答

相關問題