如何在 highcharts 中禁用不可见的图例填充？

r6hnlfcb 于 2022-11-11 发布在 Highcharts

关注(0)|答案(1)|浏览(165)

因此，我正在使用HighCharts创建一个圆环图。在该图中，我希望根据以下参考图像自定义图例：

这是我可以生成的图像：

因此，第一个图像是参考图像，第二个图像是用以下代码生成的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Donut Chart</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>

<style id="compiled-css" type="text/css">

div.g_Container{
  position: relative;

  width: 1000px;
  height: 900px;

}

</style>

</head>
<body>
    <div class="g_Container">
           <div id="g_one"></div>

    </div>

<script>
Highcharts.chart('g_one', {
    chart: {
        plotBackgroundColor: null,
        // spacingLeft: 5,
        plotShadow: false,
        width: 536,
        height: 194,
        align: 'left',
        // x:-40,
        // y:75

    },
    title: {
            text : '',
    },
    credits: {
            enabled: false
    },

    exporting:{
        width: 536,
        height: 194,
        align: 'left',
        // x: -10 
    },

    plotOptions: {

        pie: {
            slicedOffset: 2,
            dataLabels: {
                enabled: false,

            },
            startAngle: 100,
            endAngle: 100,
            showInLegend : true,

        }
    },
    series: [{
        type: 'pie',
        // name, percentage of data, color, slicing is need or not//
        keys: ['name', 'y', 'color', 'sliced'],
        size: 168,
        innerSize: 112,

        // give data name, percentage the data occupies, color to represent the data//
        data: [
        ['Eateris', 10 ,'#22306b', true],
        ['General payments', 10, '#000000', true],
        ['Shoping',10, '#9ca4be', true],
        ['Travel and Transort', 10, '#e1808b', true],
        ['Pastimes', 10, '#6d7272', true],
        ['Family and home', 10, '#6298bf', true],
        ['Utilities', 10, '#4a548e', true],
        ['Health and beauty', 10, '#ab4735', true],
        ['Groceries', 10, '#5e7ab9', true],
        ['Groups and charity', 10, '#d0d1d0', true],            
        ],
            showInLegend: true,
            dataLabels: {
                enabled: false
            }
    }],
    legend: {

        align: 'right',
        verticalAlign: 'middle',
        horizontalAlign: 'left',
        height: 800,
        width: 260,
        // itemHeight: 50,
        itemWidth:90,

        itemStyle: {
                 font: 'Sans Serif Regular',

                 fontSize: 8,
                //  paddingBottom: 5 
              },
        labelFormatter: function() {
            return '<span style="color: '+this.color+'">'+ this.name + '</span>';},
        itemHoverStyle: {
                 color: '#444'
              },
        symbolHeight: 10,

    }
});
</script>

</body>
</html>

我尝试实现的是，在图例项目之间应该有水平间隙，图例文本应该在2列和5行中。我已经根据该值指定了宽度，因此图例被分为两列。但是在图例的第二列之后仍然有很多空间，但是图例的文本没有正确显示。提前感谢

highcharts

来源：https://stackoverflow.com/questions/70575076/how-to-disble-invisible-legend-padding-in-highcharts

1条答案

按热度按时间

bmvo0sr51#

基本上，你试图添加一些边距的图例在底部，你不希望文字换行的图例。
我建议你增加legend.width的宽度，并将legend.itemWidth设置为它的一半，以实现你的2列格式。
现在进入边际底部
可以使用legend.itemMarginBottom来实现它。每个图例项的像素下边距。
默认值为0。
最后文本溢出：

legend.itemStyle.textOverflow : null

元素文本的换行符样式。Highcharts SVG元素在设置了宽度时支持省略号。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Donut Chart</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>

    <style id="compiled-css" type="text/css">
        div.g_Container {
            position: relative;
            width: 1000px;
            height: 900px;
        }
    </style>

</head>

<body>
    <div class="g_Container">
        <div id="g_one"></div>

    </div>

    <script>
        Highcharts.chart('g_one', {
            chart: {
                plotBackgroundColor: null,
                // spacingLeft: 5,
                plotShadow: false,
                width: 536,
                height: 194,
                align: 'left',
                // x:-40,
                // y:75

            },
            title: {
                text: '',
            },
            credits: {
                enabled: false
            },

            exporting: {
                width: 536,
                height: 194,
                align: 'left',
                // x: -10 
            },

            plotOptions: {

                pie: {
                    slicedOffset: 2,
                    dataLabels: {
                        enabled: false,

                    },
                    startAngle: 100,
                    endAngle: 100,
                    showInLegend: true,

                }
            },
            series: [{
                type: 'pie',
                // name, percentage of data, color, slicing is need or not//
                keys: ['name', 'y', 'color', 'sliced'],
                size: 168,
                innerSize: 112,

                // give data name, percentage the data occupies, color to represent the data//
                data: [
                    ['Eateris', 10, '#22306b', true],
                    ['General payments', 10, '#000000', true],
                    ['Shoping', 10, '#9ca4be', true],
                    ['Travel and Transort', 10, '#e1808b', true],
                    ['Pastimes', 10, '#6d7272', true],
                    ['Family and home', 10, '#6298bf', true],
                    ['Utilities', 10, '#4a548e', true],
                    ['Health and beauty', 10, '#ab4735', true],
                    ['Groceries', 10, '#5e7ab9', true],
                    ['Groups and charity', 10, '#d0d1d0', true],
                ],
                showInLegend: true,
                dataLabels: {
                    enabled: false
                }
            }],
            legend: {

                align: 'right',
                verticalAlign: 'middle',
                horizontalAlign: 'left',
                height: 800,
                width: 300,
                itemWidth: 150,
                // itemHeight: 50,
                // itemWidth: 90,

                itemStyle: {
                    font: 'Sans Serif Regular',

                    fontSize: 8,
                    textOverflow: null,
                    //  paddingBottom: 5 
                },
                labelFormatter: function() {
                    console.log(this.name)
                    return '<span style="color: ' + this.color + '">' + this.name + '</span>';
                },
                itemHoverStyle: {
                    color: '#444'
                },
                symbolHeight: 10,
                itemMarginBottom: 5,

            }
        });
    </script>

</body>

</html>

赞(0）回复(0）举报 2022-11-11

我来回答

如何在 highcharts 中禁用不可见的图例填充？

1条答案

相关问题

热门标签

最新问答