Как увеличить ширину круговой диаграммы C3 Легенда. Не для всего графика

Question

У меня есть круговая диаграмма, сделанная с C3.js, я хочу увеличить ширину легенд, чтобы они могли разместиться в одной строке. Я не хочу увеличивать размер ширины круговой диаграммы. Увеличение ширины svg через размер attiribute также увеличивает ширину круговой диаграммы.

код, я использую, чтобы сделать это

function aliasAgeName(c) { 
 
      return {"LESS_THAN_15": "<15", "BETWEEN_15_25": "15-25", "BETWEEN_25_35": "25-35", "BETWEEN_35_45": "35-45", "BETWEEN_45_55": "45-55", "BETWEEN_55_65": "55-65", "MORE_THAN_65": ">65", "NOT_DEFINED": "Not Defined"}[c]; 
 
     } 
 
var data = [ 
 
       {sex: 'male', beaconKey: '121', userKey: '01', key:'k1', date: 'Wed Jul 06 06:26:59 UTC 2016', freq: 20, preferenceList: ['Fashion','Business','Sports'], ageGroup: 'LESS_THAN_15'} 
 
       , {sex: 'male', beaconKey: '122', userKey: '01', key:'k2', date: 'Tue Jul 05 11:59:28 UTC 2016', freq: 22, preferenceList: ['Business'], ageGroup: 'BETWEEN_25_35'} 
 
       , {sex: 'female', beaconKey: '123', userKey: '01', key:'k3', date: 'Tue Jul 05 11:59:28 UTC 2016', freq: 26, preferenceList: ['Housing'], ageGroup: 'BETWEEN_35_45'} 
 
       , {sex: 'male', beaconKey: '121', userKey: '03', key:'k4', date: 'Wed Jul 06 06:26:59 UTC 2016', freq: 38, preferenceList: ['Business','Housing','Sports'], ageGroup: 'BETWEEN_25_35'} 
 
       , {sex: 'female', beaconKey: '124', userKey: '03', key:'k5', date: 'Tue Jul 05 11:59:28 UTC 2016', freq: 20, preferenceList: ['Business','Housing','Sports'], ageGroup: 'BETWEEN_45_55'} 
 
       , {sex: 'male', beaconKey: '125', userKey: '01', key:'k6', date: 'Wed Jul 06 06:26:59 UTC 2016', freq: 42, preferenceList: ['Jewels','Kids'], ageGroup: 'LESS_THAN_15'} 
 
       , {sex: 'female', beaconKey: '123', userKey: '02', key:'k7', date: 'Tue Jul 05 06:26:59 UTC 2016', freq: 34, preferenceList: ['Movies'], ageGroup: 'BETWEEN_55_65'} 
 
       , {sex: 'female', beaconKey: '121', userKey: '04', key:'k8', date: 'Wed Jul 06 06:26:59 UTC 2016', freq: 22, preferenceList: ['Culture'], ageGroup: 'BETWEEN_25_35'} 
 
       , {sex: 'female', beaconKey: '124', userKey: '01', key:'k9', date: 'Tue Jul 05 11:59:28 UTC 2016', freq: 115, preferenceList: ['Kids'], ageGroup: 'BETWEEN_35_45'} 
 
       , {sex: 'male', beaconKey: '122', userKey: '02', key:'k10', date: 'Wed Jul 06 06:26:59 UTC 2016', freq: 19, preferenceList: [], ageGroup: 'BETWEEN_45_55'} 
 
       , {sex: 'female', beaconKey: '121',userKey: '01', key:'k11', date: 'Wed Jul 06 06:26:59 UTC 2016', freq: 24, preferenceList: [], ageGroup: 'BETWEEN_35_45'} 
 
      ]; 
 

 
      var tally = {}; 
 
      var ageChartData = []; 
 

 
      data.forEach(function (user) { 
 
       ageChartData.push(aliasAgeName(user.ageGroup)); 
 
       tally[ aliasAgeName(user.ageGroup) ] = (tally[ aliasAgeName(user.ageGroup) ] || 0) + 1; 
 
      }); 
 

 
      var chart = c3.generate({ 
 
       bindto: '#ageChart', 
 
       width:{ 
 

 
       }, 
 
       size: { 
 
        height: 300, 
 
        width: 300 
 
       }, 
 
       data: { 
 
        json: [ tally ], 
 
        keys: { 
 
         value: ageChartData, 
 
        }, 
 
        type : 'pie' 
 
       } 
 
      });

<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" /> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script> 
 

 
<div id="ageChart"></div>

Answer 1

Используйте диаграмму размера конфигурации, чтобы решить эту проблему, как предназначалась ниже: -

var chart = c3.generate({ 
size: { 
    width: 600, 
    height: 300 
}, 
data: { 

Легенда обертывается следующая строка с ограниченной шириной: -

же Legend не переносится на следующую строку с достаточной шириной: -