[英]Show only the MIN/MAX value on Y-AXIS with C3JS
我只想讓y軸顯示我的數據的最小值/最大值。 我嘗試使用d3指令,但沒有結果。
我看過Google,但沒有找到實現此行為的答案。
代碼下方:
$.getJSON('assets/json/chartc3.json', function(data)
{
scene=data;
var chart = c3.generate({
bindto: '#chartc3',
data:
{
json: scene,
keys:
{
x: 'round',
value: ['Marketable', 'Total Requested Capacity', 'Your Bid'],
},
types: {
Marketable: 'area'
},
colors: {
Marketable: '#A09FA2',
'Total Requested Capacity': '#272E80',
'Your Bid': '#8EBF60'
}
},
axis:
{
x: {
tick:
{
culling:
{
max: 10
}
},
type: 'category'
},
y:
{
min: 0,
padding : {
bottom : 0
},
tick:
{
values: [[0], [***d3.max(scene)]***],
format: function (d) { return d3.format(',f')(d) +' kWh/h' }
//or format: function (d) { return '$' + d; }
}
}
}.........
如何獲得上述結果? d3.max(scene)返回NaN。
好了,問題是場景不是其json對象的數組。
var k = d3.max([1,5,2])
k will be 5
因此您將需要傳遞構成y序數的元素數組。
你需要使用
d3.max(arr, function(d){return numberic value});
要么
var arr = scene.map(function(d){return ...the number value..})
y:{
min:d3.min(arr),
max:d3.max(arr)
},
函數取決於數據的數組元素。
我使用了一個小函數自己計算最大值。
var maxs=0;
for (var j=0; j<scene.length; j++) {
var maxtemp=Math.max(scene[j].Marketable, scene[j]['Your Bid'], scene[j]['Total Requested Capacity']);
maxs=Math.max(maxs, maxtemp);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.