javascript - 总值(value)数字经常与 Highcharts 条形图中的条形重叠

Question

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

请查找下面的代码

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

                    });

Answer 1

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

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

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

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

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

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

fiddle :

• http://jsfiddle.net/jlbriggs/7n5w5as0/

引用:

• http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.inside

• http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.crop

• http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.overflow