Question

有人能告诉我为什么我的图表上的自定义数据标签在某些情况下会显示两次吗？请注意，这与导出服务中的错误没有关系，但是我将texthadow设置为“没有”＆＃39;以防万一。它似乎并不一致。提前致谢。

JSFiddle在这里： 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>

Answer 1

如我的评论中所述，范围系列显示两个数据标签 - 一个用于低，一个用于高。

在您的情况下，由于您的某些数据点靠得很近，因此图表会隐藏其中一个以避免重叠。因此，只有较长的范围显示两个数据标签。

参考：

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

要仅显示一个数据点，您可以在formatter函数内部进行检查，以查看point.y值是否等于point.high值。

示例：

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

小提琴：

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

highcharts自定义数据标签重复

1 个答案: