Javascript 某些数据标签未显示在堆叠柱高图表中

我使用Highcharts构建了一个堆叠柱形图，但是

dataLabels

有一个问题。某些数据标签无法显示

我创建了一个JSFIDLE：

这是我的Javascript代码：

$(function () {
$('#ctrend').highcharts({
    chart: {
        type:'column',
        margin: 75,
        options3d: {
            enabled: false,
            alpha: 10,
            beta: 25,
            depth: 70
        }
    },
    title: {
       text: 'Month to Month Rev',
        style: {
                fontSize: '18px',
                fontFamily: 'Verdana, sans-serif'
        }
    },
    subtitle: {
        text: 'LEVEL',
        style: {
                fontSize: '18px',
                fontFamily: 'Verdana, sans-serif'
        }
    },
    plotOptions: {
        column: {
            depth: 25
        }
    },
    credits: {
        enabled: false
    },
    xAxis: {
        categories: ['Jan', 'Feb','Mar', 'Apr','May','Jun','Jul']
    },
    yAxis: {
        title: {
            text: '(In Bio)'
        },
        stackLabels: {
            useHTML: true,
            x: 0,
            y:-28,              
            style: {
                fontSize: '10px',
                fontFamily: 'Verdana, sans-serif',
                color:'#722c84',
                //textShadow: "1px 1px #000"
            },
            enabled: true,
            formatter: function() {
                 return Highcharts.numberFormat(this.total, 0);
            },
        }
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            pointPadding: 0.1,
            dataLabels: {
                enabled: true,
                //crop: false,
                //overflow: 'none',
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',

            }
        },
        series: {
            dataLabels: {
                crop: false
            }
        }
    },
    tooltip: {
         formatter: function() {
             return 'The value for <b>' + this.x + '</b> is <b>' + Highcharts.numberFormat(this.y,2) + '</b>, in '+ this.series.name;
         }
      },
    series: [{
        name: 'Voice',
        data: [4.77,4.08,4.76,4.66,4.78,4.93,5.07],
        index:3,
        shadow : true,
        dataLabels: {
            enabled: true,
            color: '#fff',
            align: 'center',
            formatter: function() {
                 return Highcharts.numberFormat(this.y, 2);
            }, // one decimal
            y: 0, // 10 pixels down from the top
            style: {
                fontSize: '9px',
                fontFamily: 'Verdana, sans-serif'
            }
        }

    },
    {
        name: 'SMS',
        data: [4.07,3.45,4.20,4.28,4.41,4.68,5.23],
        index:2,
        shadow : true,
        dataLabels: {
            enabled: true,
            color: '#fff',
            align: 'center',
            formatter: function() {
                 return Highcharts.numberFormat(this.y, 2);
            }, // one decimal
            y: 0, // 10 pixels down from the top
            style: {
                fontSize: '9px',
                fontFamily: 'Verdana, sans-serif'
            }
        }

    }, {
        name: 'Other',
        data: [0.52,0.49,0.61,0.62,0.62,0.64,0.70],
        index:0,
        shadow : true,
        dataLabels: {
            enabled: true,
            color: '#fff',
            align: 'center',
            formatter: function() {
                 return Highcharts.numberFormat(this.y, 2);
            }, // one decimal
            y: 0, // 10 pixels down from the top
            style: {
                fontSize: '9px',
                fontFamily: 'Verdana, sans-serif'
            }
        }

    }, {
        name: 'Data',
        data:[1.55,1.39,1.72,1.68,1.86,2.15,2.27],
        index:1,
        shadow : true,
        dataLabels: {
            enabled: true,
            crop: false,
            color: '#fff',
            align: 'center',
            formatter: function() {
                 return Highcharts.numberFormat(this.y, 2);
            }, // one decimal
            y: 0, // 10 pixels down from the top
            style: {
                fontSize: '9px',
                fontFamily: 'Verdana, sans-serif'
            }
        }

    }]
});
});

$（函数（）{
$（'#ctrend'）。高图({
图表：{
类型：'column'，
差额：75，
选项3D：{
启用：false，
阿尔法：10，
贝塔：25，
深度：70
}
},
标题：{
文本：“逐月修订版”，
风格：{
fontSize:'18px'，
fontFamily:“Verdana，无衬线”
}
},
副标题:{
文本：“级别”，
风格：{
fontSize:'18px'，
fontFamily:“Verdana，无衬线”
}
},
打印选项：{
专栏：{
深度：25
}
},
学分：{
已启用：false
},
xAxis：{
类别：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”、“七月”]
},
亚克斯：{
标题：{
正文：‘（在简历中）’
},
堆叠标签：{
是的，
x:0,，
y:-28，
风格：{
fontSize:'10px'，
fontFamily:“Verdana，无衬线”，
颜色：“#722c84”，
//textShadow：“1px 1px#000”
},
启用：对，
格式化程序：函数（）{
返回Highcharts.numberFormat（this.total，0）；
},
}
},
打印选项：{
专栏：{
堆叠：“正常”，
点填充：0.1，
数据标签：{
启用：对，
//作物：假，
//溢出：“无”，
颜色：（Highcharts.theme&&Highcharts.theme.dataLabelsColor）| |“白色”，
}
},
系列：{
数据标签：{
作物：假
}
}
},
工具提示：{
格式化程序：函数（）{
在“+this.series.name”中返回“+this.x+”的值为“+Highcharts.numberFormat（this.y，2）+”；
}
},
系列：[{
姓名：'声音'，
数据：[4.77,4.08,4.76,4.66,4.78,4.93,5.07]，
索引：3，
影子：没错，
数据标签：{
启用：对，
颜色：“#fff”，
对齐：'居中'，
格式化程序：函数（）{
返回Highcharts.numberFormat（此.y，2）；
}，//小数点后一位
y:0，//从顶部向下10像素
风格：{
fontSize:'9px'，
fontFamily:“Verdana，无衬线”
}
}
},
{
姓名：'短信'，
数据：[4.07,3.45,4.20,4.28,4.41,4.68,5.23]，
索引：2，
影子：没错，
数据标签：{
启用：对，
颜色：“#fff”，
对齐：'居中'，
格式化程序：函数（）{
返回Highcharts.numberFormat（此.y，2）；
}，//小数点后一位
y:0，//从顶部向下10像素
风格：{
fontSize:'9px'，
fontFamily:“Verdana，无衬线”
}
}
}, {
名称：'其他'，
数据：[0.52,0.49,0.61,0.62,0.62,0.64,0.70]，
索引：0，
影子：没错，
数据标签：{
启用：对，
颜色：“#fff”，
对齐：'居中'，
格式化程序：函数（）{
返回Highcharts.numberFormat（此.y，2）；
}，//小数点后一位
y:0，//从顶部向下10像素
风格：{
fontSize:'9px'，
fontFamily:“Verdana，无衬线”
}
}
}, {
名称：'数据'，
数据：[1.55,1.39,1.72,1.68,1.86,2.15,2.27]，
索引：1，
影子：没错，
数据标签：{
启用：对，
作物：假，
颜色：“#fff”，
对齐：'居中'，
格式化程序：函数（）{
返回Highcharts.numberFormat（此.y，2）；
}，//小数点后一位
y:0，//从顶部向下10像素
风格：{
fontSize:'9px'，
fontFamily:“Verdana，无衬线”
}
}
}]
});
});

---

需要帮助

Highcharts认为这些数据标签太近，无法全部显示

您可以通过允许重叠来解决这个问题，使用以下代码（）：

或者通过减少填充（）使其不太可能发生：

plotOptions: {
    series: {
        dataLabels: {
            allowOverlap: true
            // ...
        }
    }
}

plotOptions: {
    series: {
        dataLabels: {
            padding: 0
            // ...
        }
    }
}