highcharts benutzerdefinierte Datalabels duplizieren

Kann mir jemand sagen, warum die benutzerdefinierten Databells auf meinem Diagramm in einigen Fällen zweimal angezeigt werden? Beachten Sie, dass dies nicht mit dem Fehler im Exportdienst zusammenhängt, aber ich habe den Textschatten nur für den Fall auf 'none' gesetzt. Es scheint nicht konsistent zu sein. Danke im Voraus.highcharts benutzerdefinierte Datalabels duplizieren

Die JSFiddle ist hier: 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>

Quelle

2016-05-24 Richard Stevens

Bereich Serie eine DATALABEL angezeigt sowohl für die Hoch- und Tiefpunkte. Der Grund, warum es nur für einige angezeigt wird, ist, dass die allowOverlap() -Optionen standardmäßig auf "false" gesetzt sind und sich einige Ihrer Punkte überlappen würden, sodass sie versteckt sind. http://api.highcharts.com/highcharts#plotOptions.columnrange.dataLabels Sie sollten in der Lage sein, einige Prüfungen im Formatierer zu machen, um nur einen Wert auf dem Höhepunkt zurückzugeben – jlbriggs

Wie in meinem Kommentar erwähnt, die Bereich Serie Anzeige zwei Datenetikett - ein für die niedrigen und einen für die hoch.

In Ihrem Fall, weil einige Ihrer Datenpunkte dicht beieinander liegen, versteckte das Diagramm einen von ihnen, um Überlappungen zu vermeiden. Daher zeigten nur die längeren Bereiche zwei Datenbeschriftungen.

Referenz:

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

nur einen Datenpunkt anzuzeigen, können Sie einen Scheck innerhalb der Formatierungsfunktion tun, um zu sehen, ob der point.y Wert entspricht den point.high Wert.

Beispiel:

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

Fiddle:

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

Quelle

2016-05-24 19:31:10 jlbriggs

Ehrfürchtig - danke für die genaue Antwort, die ich brauchte, und schnell. –

highcharts benutzerdefinierte Datalabels duplizieren

Antwort

Verwandte Themen