Highcharts dataLabel重叠

时间:2015-03-12 21:09:07

标签: javascript angularjs highcharts highcharts-ng

我有一个高图堆叠条形图,其中有一些极低的值。这导致两个dataLabels重叠,就像这个小提琴:http://jsfiddle.net/cerjps88/

确保标签不会重叠的最佳方法是什么?

这是我的高级代码:

function getCostStackedColumnChart(series) {

    function costFilterPluck(costCollection, propertyName) {
        return _.chain(costCollection)
                .filter(function (f){
                    return Math.abs(f.metric_mean_patient_cost) > 0 && Math.abs(f.metric_mean_patient_cost_rx) > 0
                })
                .pluck(propertyName)
                .take(10)
                .value();
    }

    function shapeCostData(costCollection) {

        return [
            {
                name: 'RxCost Per Prescription',
                color: '#1aadce',
                data: costFilterPluck(series, 'metric_mean_patient_cost_rx')
            },
            {
                name: 'Retail Price Per Prescription (2014)',
                color: '#00FFFF',
                data: costFilterPluck(series, 'metric_drug_price_rx')
            }
        ];
    }

    return {
        options: {
            chart: {
                type: 'column'
            },
            tooltip: {
                formatter: function () {
                    var format = d3.format(",.2f");
                    var chart = this.point.series.chart;
                    var index = chart.xAxis[0].categories.indexOf(this.x);
                    var series1 = this.point.series;
                    return '<b>' + this.x + '</b><br/>' +
                            series1.name + ': $' + format(this.y);
                }
            },
            showInLegend: true,
            plotOptions: {
                column: {
                    grouping: true,
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        allowOverlap: false,
                        format: '${y:,.2f}',
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'black',
                        style: {
                            fontWeight: 'bold',
                            textShadow: '0 0 3px white'
                        },
                    }
                }
            }
        },
        xAxis: {
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            },
            categories: costFilterPluck(series, 'aedrug_label'),
            title: {text: 'Drug'}
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Total Cost Per Prescription'
            }
        },
        tooltip: {
            shared: true
        },
        title: {
            text: drugGroupName + ' RxCost'
        },
        series: shapeCostData(series)
    };
}

1 个答案:

答案 0 :(得分:1)

最新版本的highcharts会自动隐藏重叠标签。升级新版本后,问题已得到解决。