在我的应用程序中,我使用 c3 图表来实现动态图表。因为我需要仅显示值 >0 的条形。这是 fiddle 链接。
因为我只需要显示 2010 年的条形图。我知道可以通过在前端使用 JSON 重建来实现这一点。除此之外,还有其他方法可以实现吗?
JS:
var data = { "results": [{ year: 2006, amnt: 0 }, { year: 2007, amnt: 0 }, { year: 2008, amnt: 0 }, { year: 2009, amnt: 0 }, { year: 2010, amnt: 279 }, { year: 2011, amnt: 440 }, { year: 2012, amnt: 350 }, { year: 2013, amnt: 649 }, { year: 2014, amnt: 874 }, { year: 2015, amnt: 833 }, { year: 2016, amnt: 801 }] };
var chart = c3.generate({
bindto: '#chart',
data: {
json: data.results,
keys: { x: 'year', value: ['amnt'] },
type: 'bar',
colors: { 'amnt': '#8c651c' }
},
axis: {
x: {
label: {
text: 'Year',
position: 'outer-center',
},
type: 'category',
tick: {
centered: true
}
},
y: {
tick: {
format: d3.format("$,")
},
label: {
text: '($ in millions)',
position: 'outer-middle'
},
padding: {
top: 0,
bottom: 0
}
}
},
grid: {
y: { show: true }
},
legend: {
show: false
}
});
HTML:
<div id="chart"></div>
最佳答案
对 json 数据使用 filter
以获得所需的结果。
var result = data.results.filter(function(item) {
return item.amnt !== 0;
});
关于javascript - C3 图表中的特定 JSON 值限制,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42687889/