javascript - 一些数据标签未显示在堆叠列 Highchart 中

Question

我使用 Highcharts 构建了一个堆积柱形图，但是 dataLabels 有问题。部分数据标签无法显示。

我创建了一个 JSFiddle:http://jsfiddle.net/samsularifin/7gf787vL/1/

这是我的 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'
            }
        }

    }]
});
});

需要帮助!

Answer 1

Highcharts 认为这些数据标签过于接近，无法全部显示。

您可以使用以下代码 (JSFiddle) 允许重叠来解决此问题:

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

或者通过减少填充 (JSFiddle) 来降低它发生的可能性:

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