0

我有一个条形图，通常总值会在上面重叠，如下所示。我试图减少图形的面积、宽度和高度，这个问题得到了解决，但是对于其他一些值又出现了，有没有永久的解决方案来避免重叠？ 在此处输入图像描述

请在下面找到代码

 $('#' + divid).highcharts({
                        chart: {
                            type: chart_type == 'bar_simple' || chart_type == 'bar' ? 'bar' : 'column',
                            margin: 75,
                            marginBottom: $('.hidSelectedOA').val() == '0' ? '110' : '60',
                            marginLeft: marginLeftOfGraph,
                            marginTop: marginTopOfGraph
                        },
                        title: {
                            text: graphName
                        },
                        xAxis: {
                            categories: category_name,
                            labels: {
                                formatter: function () {
                                    var text = this.value,
                                        formatted = text.length > 20 ? text.substring(0, 20) + '...' : text;

                                    return '<div>' + formatted + '</div>';
                                },
                                style: {
                                    width: '150px'
                                },
                                useHTML: true
                            }

                        },
                        yAxis: {

                            title: {
                                text: '',
                            },

                            stackLabels: {
                                enabled: true,
                                style: {
                                    fontWeight: 'bold',
                                    color: 'gray'
                                },

                            }
                        },
                        legend: {
                            verticalAlign: 'bottom',
                            itemStyle: {
                                font: '12px Trebuchet MS, Verdana, sans-serif',
                                color: '#A0A0A0',

                            },
                            enabled: true,
                            //backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
                            //borderColor: '#CCC',
                            itemMarginTop: 15
                            //borderWidth: 1,
                            //shadow: false
                        }, credits: {
                            enabled: false
                        },
                        exporting: { enabled: divid == 'myModalInnerHtml' ? true : false },
                        colors: colors
                        ,
                        tooltip: {
                            headerFormat: '<b>{point.x}</b><br/>',
                            pointFormat: '{series.name}: ' + cur + '{point.y:,' + format + '}'

                        },
                        plotOptions: {
                            column: {
                                stacking: chart_type == 'bar_simple_column' ? '' : 'normal',
                                dataLabels: {
                                    enabled: true,
                                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'gray',
                                    format: '{point.y:,' + format + '}'

                                }
                            },
                            series: {
                                stacking: chart_type == 'bar_simple_column' ? '' : 'normal',
                            },

                            line: {
                                dataLabels: {
                                    enabled: true,
                                    format: '{point.y:,.2f}'
                                },

                                enableMouseTracking: false
                            }
                        },
                        series: JSON.parse(data.d),

                    });
4

1 回答 1

2

假设您指的是该dataLabel位置，您所看到的是当列外没有足够的空间分配时，标签在列内移动。

这受轴极值、轴maxPadding和各种数据标签属性的影响。

为确保它们始终显示在列之外，您可以将crop、overflow和inside设置添加到数据标签选项中：

   plotOptions: {
     column: {
       dataLabels: {
         enabled: true,
         inside: false,
         crop: false,
         overflow: 'none'
       }
     }
   }

请记住，这可能会导致标签被图表标题或图表顶部的其他元素截断或重叠的问题。

您需要确保在标题和图表之间留出足够的空间，以防标签被推到绘图区域上方。

小提琴：

参考：

于 2017-01-03T14:16:09.530 回答