highcharts responsive datalabels display

问题

Is there any way to set the dataLabels of the highcharts to not overlap for smaller sizes?

I have a chart which is similar to this one but what I'd like to achieve is:

alternate the Y values (data Labels: 15, 40, and so on.)
avoid text overlapping, instead of number I have: "Long text" which overlaps at iPhone size

Is there any other option without specifying the x and y position of the dataLabels?

{
  "x": 1400457600000,
  "y": 15,
  "dataLabels": {
      "x": 25,
      "y": -5,
      "style": {
         "color": "#000000"
      }
   }
}

回答1:

You can use this example which detect a collision.

 events: {
                load: function() {
                    StaggerDataLabels(this.series);
                },
                redraw: function() {
                    var series = this.series;
                    setTimeout(function() {
                        StaggerDataLabels(series);
                    }, 1000);
                }
            },

回答2:

You can alternate them with a customer formatter. This function tracks how many times it's been called and only returns the label for the even calls:

plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                formatter: function(){
                    if (this.series.chart.dlFCalls == null){
                        this.series.chart.dlFCalls = -1;
                    }
                    this.series.chart.dlFCalls++;
                    if (this.series.chart.dlFCalls % 2 == 0){
                        return this.y;   
                    }
                }
            }
        }
    }

As far as fitting long text, I'd use a combination of rotation and offset the y value up a bit.

Here's a fiddle example.

来源：https://stackoverflow.com/questions/23739935/highcharts-responsive-datalabels-display

标签

javascript