如何仅增加C3饼图的宽度图例。不是整个图

我有一个用C3.js制作的饼图，我想增加图例的宽度，以便它们可以容纳在一行中。我不想增加饼图的宽度大小。通过大小attiribute增加svg的宽度也会增加饼图的宽度。如何仅增加C3饼图的宽度图例。不是整个图

我使用，使这个代码是

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>

来源

2016-07-14 Raichu

使用尺寸图的配置来解决这个问题，下面演示了： -

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

图例包装为具有有限的宽度下一行： -

同图例不裹以足够的宽度下一行： -

来源

2016-07-14 09:29:23 Chetan

使用饼图示例http://c3js.org/samples/chart_pie.html到玩宽度。 – Chetan

如何仅增加C3饼图的宽度图例。不是整个图

回答

相关问题