Диаграмма C3 с процентами - PullRequest
Новая
       18

Диаграмма C3 с процентами

0 голосов
/ 08 ноября 2018

Я использую диаграмму C3 с реакции.И график создается без проблем.Но мне нужно, чтобы данные из столбцов [1, 5, 1, 5, 2, 2, 1, 3] отображались рядом с%.

Пример 1%, 5%, 1%, 2% ...

This is the bar chart

Это мой код 

 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 Ответ

0 голосов
/ 08 ноября 2018

Добавить метки к диаграммам 

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