Question

我正在使用带有反应的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%'}}}
/>

有什么想法吗？感谢您的帮助！

Answer 1

向图表添加标签

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%'}}}
/>

C3图表栏百分比

1 个答案: