代码之家 › 专栏 › 技术社区 › NelbeDG

带百分比的C3图表栏

react-chartjs c3.js bar-chart reactjs javascript

NelbeDG · 技术社区 · 6 年前

我用的是C3图表。图表的创建没有问题。但是我需要把横条[1,5,1,5,2,2,1,3]的数据显示在百分比旁边。

这是我的密码

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

有什么想法吗?

1 回复 | 直到 4 年前

front_end_dev 6 年前

向图表添加标签

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