C3 원형 차트 범례의 너비를 늘리는 방법. 전체 그래프가 아님

C3.js로 만든 파이 차트가 있는데, 한 줄에 수용 할 수 있도록 범례의 폭을 늘리고 싶습니다. 원형 차트의 너비 크기를 늘리고 싶지 않습니다. attvibize 크기를 통해 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: {

범례로 넘어갑니다. 제한된 폭이 다음 라인 : -

전설 충분한 폭 다음 줄로 줄 바꿈하지 않는 같은 : -에 http://c3js.org/samples/chart_pie.html

출처

2016-07-14 09:29:23 Chetan

를 사용하여 원형 차트의 예 너비로 놀아 라. – Chetan

C3 원형 차트 범례의 너비를 늘리는 방법. 전체 그래프가 아님

답변

관련 문제