Javascript 在高图和条形图中，总值数字通常与条形图重叠_Javascript_Jquery_Highcharts_Highcharts Ng_Lazy High Charts

Javascript 在高图和条形图中，总值数字通常与条形图重叠

javascript jquery highcharts

Javascript 在高图和条形图中，总值数字通常与条形图重叠,javascript,jquery,highcharts,highcharts-ng,lazy-high-charts,Javascript,Jquery,Highcharts,Highcharts Ng,Lazy High Charts,我有一个条形图，通常总价值重叠在上面，如下所示。我试图减少图形的面积、宽度和高度，这个问题得到了解决，但对于一些其他值，是否有永久性的解决方案来避免重叠？请查找下面的代码 $('#' + divid).highcharts({ chart: { type: chart_type == 'bar_simple' || chart_type == 'bar' ? 'bar' : 'colu

我有一个条形图，通常总价值重叠在上面，如下所示。我试图减少图形的面积、宽度和高度，这个问题得到了解决，但对于一些其他值，是否有永久性的解决方案来避免重叠？

请查找下面的代码

 $('#' + 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),

                    });

$（'#'+divid）.highcharts({
图表：{
类型：图表类型=='bar\u simple'| |图表类型=='bar'？'bar'：'column'，
差额：75，
marginBottom:$（'.hidSelectedOA'）.val（）='0'？'110'：'60'，
marginLeft:marginleftograph，
marginTop:marginTopOfGraph
},
标题：{
文本：graphName
},
xAxis：{
类别：类别名称，
标签：{
格式化程序：函数（）{
var text=this.value，
格式化=文本。长度>20？文本。子字符串（0，20）+'…'：文本；
返回“”+格式化+“”；
},
风格：{
宽度：“150px”
},
useHTML:true
}
},
亚克斯：{
标题：{
文本：“”，
},
堆叠标签：{
启用：对，
风格：{
fontWeight:'粗体'，
颜色：“灰色”
},
}
},
图例：{
垂直排列：“底部”，
项目样式：{
字体：“12px投石机MS，Verdana，无衬线”，
颜色：'#A0'，
},
启用：对，
//背景颜色：（Highcharts.theme&&Highcharts.theme.background2）| |“白色”，
//边框颜色：“#CCC”，
项目编号：15
//边框宽度：1，
//影子：错
}，学分：{
已启用：false
},
正在导出：{enabled:divid='myModalInnerHtml'？true:false}，
颜色：颜色
,
工具提示：{
headerFormat:“{point.x}
”，
点格式：'{series.name}:'+cur+'{point.y:，'+format+'}'
},
打印选项：{
专栏：{
堆叠：图表类型=='bar\u simple\u column'？'''normal'，
数据标签：{
启用：对，
颜色：（Highcharts.theme&&Highcharts.theme.dataLabelsColor）| |“灰色”，
格式：'{point.y:，'+format+'}'
}
},
系列：{
堆叠：图表类型=='bar\u simple\u column'？'''normal'，
},
行：{
数据标签：{
启用：对，
格式：“{point.y:，.2f}”
},
enableMouseTracking:false
}
},
系列：JSON.parse（data.d），
});

假设您指的是

dataLabel

位置，您看到的是当列外部分配的空间不足时，标签在列内部移动

这受轴极限、轴

maxPadding

和各种数据标签属性的影响

为确保它们始终显示在列外部，您可以将

裁剪

、

溢出

和

内部

设置添加到数据标签选项中：

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

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

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

小提琴：

参考：