如何仅增加 C3 饼图图例的宽度。不适用于整个图表答案

【问题标题】：How to Increase the width of C3 pie chart Legend only. Not for the whole graph如何仅增加 C3 饼图图例的宽度。不适用于整个图表
【发布时间】：2016-11-16 22:35:56
【问题描述】：

我有一个用 C3.js 制作的饼图，我想增加图例的宽度，以便它们可以容纳在一行中。我不想增加饼图的宽度。通过 size 属性增加 svg 的宽度也会增加饼图的宽度。

我用来做这个的代码是

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>

【问题讨论】：

标签： javascript d3.js svg c3.js legend-properties

【解决方案1】：

使用尺码表配置来解决这个问题，如下所示：

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

图例以有限的宽度换行到下一行：-

相同的图例不会以足够的宽度换行到下一行：-

【讨论】：