我正在使用带有反应的 C3 图表。并且图表创建没有问题。但我需要将条形 [1, 5, 1, 5, 2, 2, 1, 3] 中的数据显示在 % 旁边。
示例 1%、5%、1%、2%...
这是我的代码
const failureTopBar = {
data: {
columns: [
["Probability", 1, 5, 1, 5, 2, 2, 1, 3]
],
type: 'bar',
labels: true,
colors: {
data1: '#4DA7EF',
}
},
bar: {
width: 10
},
axis: {
rotated: true,
y: {
show: false,
},
x:{
type: 'category',
categories: ['failure 1','failure 2','failure 2','failure 3','failure 4','failure 5','failure 6','failure 7']
}
},
legend: {
show: false
},
grid: {
lines: {
front: false
}
},
tooltip: {
show: false
}
}
<C3Chart
data={failureTopBar.data}
bar={failureTopBar.bar}
axis={failureTopBar.axis}
legend={failureTopBar.legend}
grid={failureTopBar.grid}
tooltip={failureTopBar.tooltip}
style={{svg: {width: '100%'}}}
/>
有什么想法吗? 感谢您的帮助!
最佳答案
向图表添加标签
labels: {
format:function (v, id, i, j) { return v + '%'; }
}
更新代码
const failureTopBar = {
data: {
columns: [
["Probability", 1, 5, 1, 5, 2, 2, 1, 3]
],
type: 'bar',
labels: {
format:function (v, id, i, j) { return v + '%'; }
},
colors: {
data1: '#4DA7EF',
}
},
bar: {
width: 10
},
axis: {
rotated: true,
y: {
show: false,
},
x:{
type: 'category',
categories: ['failure 1','failure 2','failure 2','failure 3','failure 4','failure 5','failure 6','failure 7']
}
},
legend: {
show: false
},
grid: {
lines: {
front: false
}
},
tooltip: {
show: false
}
}
<C3Chart
data={failureTopBar.data}
bar={failureTopBar.bar}
axis={failureTopBar.axis}
legend={failureTopBar.legend}
grid={failureTopBar.grid}
tooltip={failureTopBar.tooltip}
style={{svg: {width: '100%'}}}
/>
关于javascript - C3 带百分比的图表栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53207774/