highcharts custom datalabels duplicating

问题

Can anyone tell me why the custom datalabels on my chart are displayed twice in some cases? Note that this is not related to the bug in the export service, but I set textshadow to 'none' just in case. It does not seem to be consistent. Thanks in advance.

The JSFiddle is here: https://jsfiddle.net/zh3hvya3/

<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
#container {
    height: 400px; 
    min-width: 310px; 
    max-width: 800px;
    margin: 0 auto;
}
</style>

<script type="text/javascript">          

$(function () {
  window.chart1 = new Highcharts.Chart({
     chart: {
        renderTo: 'container',
        type: 'columnrange',
        inverted: true
     },
     title: {
        text: 'Tractor Utilization Chart'
     },
     xAxis: {
        title: {
            text: 'Vehicle'
        },
        categories: ['970106', '970108', '970110', '970111']
     },
     yAxis: {
        type: 'datetime',
        gridLineWidth: 1,
        gridLineColor: '#888888',
        min: 1463893200000,
        max: 1464498000000,
        tickInterval: 6 * 3600 * 1000,
        title: {
            text: 'Day and Time'
        }
     },
     legend: {
        enabled: true,
        labelFormatter: function() {
            return 'ABC';
        }
     },
     plotOptions: {
        columnrange: {
            grouping: false
        }
     },
     series: [{
        data: [{
            color: 'cyan',
            dataLabels: {
                enabled: true,
                align: 'left',
                style: {
                    textShadow: 'none'
                },
                formatter: function() {
                    return '20614523';
                }
            },
            x: 0,
            low: 1464057000000,
            high: 1464114900000
        }, {
            color: 'cyan',
            dataLabels: {
                enabled: true,
                align: 'left',
                style: {
                    textShadow: 'none'
                },
                formatter: function() {
                    return '20614531';
                }
            },
            x: 1,
            low: 1464060600000,
            high: 1464120660000
        }, {
            color: 'cyan',
            dataLabels: {
                enabled: true,
                align: 'left',
                style: {
                    textShadow: 'none'
                },
                formatter: function() {
                    return '20614601';
                }
            },
            x: 2,
            low: 1464048000000,
            high: 1464078538000
        }, {
            color: 'cyan',
            dataLabels: {
                enabled: true,
                align: 'left',
                style: {
                    textShadow: 'none'
                },
                formatter: function() {
                    return '20614504';
                }
            },
            x: 3,
            low: 1463967000000,
            high: 1464011852000
        }],
     }, {
        data: [{
            color: 'cyan',
            dataLabels: {
                enabled: true,
                align: 'left',
                style: {
                    textShadow: 'none'
                },
                formatter: function() {
                    return '20614502';
                }
            },
            x: 0,
            low: 1463947200000,
            high: 1463994392000
        }]
     }]
   });
}); 

</script>
</head>

<body>    
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>    
<div id="container" style="height: 400px"></div>
</body>
</html>

回答1:

As noted in my comment, the range series display two data labels - one for the low, and one for the high.

In your case, because some of your data points are close together, the chart hid one of them to avoid overlap. Therefore, only the longer ranges showed two data labels.

Reference:

http://api.highcharts.com/highcharts#plotOptions.columnrange.dataLabels.allowOverlap

To show only one data point, you can do a check inside the formatter function, to see if the point.y value equals the point.high value.

Example:

formatter: function() {
  if (this.y == this.point.high) {
    return this.point.val;
  }
}

Fiddle:

https://jsfiddle.net/jlbriggs/4aoxt7p0/

来源：https://stackoverflow.com/questions/37420143/highcharts-custom-datalabels-duplicating

标签

Highcharts