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

Question

So I am creating a doughnut chart, using HighCharts.所以我正在创建一个圆环图，使用 HighCharts。 In which I want to customise the legends according to the following reference image: enter image description here我想根据以下参考图像自定义图例：在此处输入图像描述

And here is the image I could generate: enter image description here这是我可以生成的图像：在此处输入图像描述

SO the first image is reference image and the second I generated with the follwing code:所以第一张图片是参考图片，第二张是我用以下代码生成的：

<!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>

What I am trying to achieve is, there should be horizontal gaps between the legend items, and the legend texts should come in 2 columns and 5 rows.我想要实现的是，图例项之间应该有水平间隙，图例文本应该有 2 列和 5 行。 I have given the width according to that, so that the legends are getting divided into two columns.我已经根据它给出了宽度，因此图例被分为两列。 But there is a lot of space which remains after the second column of the legend, but yet the legend's text is not coming properly.但是在图例的第二列之后还有很多空间，但是图例的文本并没有正确显示。 Thanks in advance提前致谢

Answer 1

Basically you're trying to add some margin to the legends at bottom and you dont want text wrap on the legends.基本上，您正在尝试为底部的图例添加一些边距，并且您不希望在图例上换行。

I suggest you increase your width on the legend.width and set legend.itemWidth to half of it to achieve your 2 column format.我建议你在 legend.width 上增加你的宽度并将 legend.itemWidth 设置为它的一半以实现你的 2 列格式。

Now coming to margin-bottom现在来到边缘底部

legend.itemMarginBottom can be used to achieve it. legend.itemMarginBottom可以用来实现它。 The pixel bottom margin for each legend item.每个图例项的像素下边距。

Defaults to 0.默认为 0。

Lastly the text overflow:最后文本溢出：

legend.itemStyle.textOverflow : null

Line break style of the element text.元素文本的换行样式。 Highcharts SVG elements support ellipsis when a width is set. 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>

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-01-04 07:30:07

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-01-04 07:30:07

解决方案1
0 已采纳 2022-01-04 07:30:07