So vergrößern Sie die Breite des C3-Kreisdiagramms Nur Legende. Nicht für die ganze Grafik

Question

Ich habe ein Tortendiagramm mit C3.js gemacht, ich möchte die Breite der Legenden erhöhen, so dass sie in einer Zeile unterbringen können. Ich möchte die Breite des Kreisdiagramms nicht vergrößern. Wenn Sie die Breite von svg über die Größe attiribute erhöhen, erhöht sich auch die Breite des Kreisdiagramms.

Der Code, den ich dies zu machen verwende ist

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

Verwenden Größentabelle Config dieses Problem zu beheben, wie unten demoed: -

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

Legende wird umbrochen nächste Zeile mit begrenzten Breite: -

Samt Legend Wickel nicht zur nächsten Zeile mit ausreichender Breite: -