highcharts自定义数据标签重复 [英] highcharts custom datalabels duplicating

查看：176 发布时间：2018/6/11 19:29:07 highcharts

本文介绍了highcharts自定义数据标签重复的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

任何人都可以告诉我为什么我的图表上的自定义数据标签在某些情况下会显示两次？请注意，这与导出服务中的错误无关，但为了以防万一，我将textshadow设置为'none'。它似乎并不一致。提前致谢。

JSFiddle在这里：
https：// jsfiddle.net/zh3hvya3/

 < html> 
< script type =text / javascriptsrc =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> 
 $ b $（函数（）{
 window.chart1 = new Highcharts.Chart（{
图表：{
 renderTo：'container'，
 type ：'columnrange'，
 inverted：true 
}，
 title：{
 text：'Tractor Utilization Chart'
}，
 xAxis：{
 title：{
 text：'Vehicle'
}，
 categories：['970106'，'970108'，'970110'，'970111'] 
}， 
 yAxis：{
类型：'datetime'，
 gridLineWidth：1，
 gridLineColor：'＃888888'，
最小值：1463893200000，
最大值： 1464498000000，
 tickInterval：6 * 3600 * 1000，
 title：{
 text：'Day and Time'
} 
}，
 legend：{ 
 enabled：true，
 labelFormatter：function（）{
 return'ABC'; 
} 
}，
 plotOptions：{
列格式：{
分组：
} 
}，
系列：[{
 data：[{
 color：'cyan'，
 dataLabels：{
 enabled：true，
 align：'left'，
 style：{
 textShadow：'none'
}，
 formatter：函数（）{
返回'20614523'; 
} 
}，
x：0，
低：1464057000000，
高：1464114900000 
}，{
颜色：'青色'， 
 dataLabels：{
 enabled：true，
 align：'left'，
 style：{
 textShadow：'none'
}，
格式化程序：function（）{
 return'20614531'; 
} 
}，
x：1，
低：1464060600000，
高：1464120660000 
}，{
颜色：'青色'， 
 dataLabels：{
 enabled：true，
 align：'left'，
 style：{
 textShadow：'none'
}，
格式化程序：function（）{
 return'20614601'; 
} 
}，
x：2，
低：1464048000000，
高：1464078538000 
}，{
颜色：'青色'， 
 dataLabels：{
 enabled：true，
 align：'left'，
 style：{
 textShadow：'none'
}，
格式化程序：function（）{
 return'20614504'; 
} 
}，
x：3，
低：1463967000000，
高：1464011852000 
}]，
}，{
数据：[{
 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 =containerstyle =height：400px>< / div> 
< / body> 
< / html>

解决方案

数据标签 - 一个用于低位，另一个用于高位。

在你的情况中，因为你的一些数据点靠近在一起，图表隐藏了其中一个避免重叠。因此，只有较长的范围才会显示两个数据标签。

参考：

http://api.highcharts.com/highcharts#plotOptions.columnrange.dataLabels.allowOverlap 为了仅显示一个数据点，您可以在格式化程序函数中进行检查，以查看是否存在<

$ b

c $ c> point.y 值等于 point.high 值。

例子：

pre $格式化函数（）{
if（this.y == this.point.high）{
返回this.point.val;

$ / code $ / pre
$ b $小提琴：

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

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>

解决方案

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/

这篇关于highcharts自定义数据标签重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

highcharts自定义数据标签重复 [英] highcharts custom datalabels duplicating

问题描述

相关文章

JavaScript最新文章

热门教程

热门工具

登录关闭

highcharts自定义数据标签重复 [英] highcharts custom datalabels duplicating

问题描述

相关文章

JavaScript最新文章

热门教程

热门工具

登录 关闭

登录关闭