2016-01-10 2 views
1

Когда метки данных перекрываются в Highcharts, отображается только одна метка данных. Кажется, это случайное обращение. См скрипку:Приоритет отображения ярлыков с перекрывающимися метками

http://jsfiddle.net/lamarant/rmxLd1d4/

$(function() { 
    $('#container').highcharts({ 
     title: { 
      text: 'Label Test' 
     }, 
     series: [{ 
      type: 'line', 
      data: [ 10, 10, 10, 10, 10, 10, 50], 
      dataLabels: { 
       enabled: true, 
       color: 'blue', 
       zIndex: 10 
      }, 
      zIndex: 10 
     }, 
     { 
      type: 'line', 
      data: [ 11, 11, 11, 11, 11, 11, 49], 
      dataLabels: { 
       enabled: true, 
       color: 'red', 
       zIndex: 10 
      }, 
      zIndex: 20 
     }] 
    }); 
}); 

Обратите внимание, что первая метка данных отображается на графике от второй серии, а остальные из первой серии.

Я попытался установить приоритет отображения этикеток с использованием ZIndex в обоих серии и series.dataLabel не повезло.

Есть ли способ установить его так, чтобы назначенная серия всегда имела приоритет, когда Highcharts определяет, какую метку отображать?

+0

Вы можете включить все datalabels по опции [allowOverlap] (http://api.highcharts.com/highcharts#plotOptions.series.dataLabels.allowOverlap) как true. Затем примените обходной путь, как здесь: - http://jsfiddle.net/menXU/1/ - http://jsfiddle.net/menXU/6/ –

ответ

3

Одно из возможных исправлений: labelrank для каждой точки, которая используется для оценки их порядка сортировки. Если вы укажете этот ранг для каждой точки в серии, эта серия должна рассматриваться как «выше» без такого ранга (или с более низким значением целочисленного ранга).

В коде вручную для каждой точки:

series: [{ 
    data: [ 
     { y: 11, labelrank: 1 }, 
     { y:11, labelrank: 1 } 
     // ... 
    ], 
    // ... 
}] 

В коде, используя функцию обратного вызова (JSFiddle):

$('#container').highcharts({ 
    // Options ... 
}, function() { 
    var mySeriesIndex = 1; 

    // For each point in the preferred series 
    for(i = 0; i < this.series[mySeriesIndex].points.length; i++) 
     // Set a labelrank 
     this.series[mySeriesIndex].points[i].labelrank = 1; 
}); 

Мой текущий взять на себя сам вопрос заключается в следующем:

С текущей реализацией логики перекрытия мне кажется, что это немного непреднамеренное поведение. Исходный код использует Array.sort таким образом, который сдвигает позиции меток точек, так как Array.sort не гарантируется быть стабильным (товары с одинаковым значением не сохранят свой первоначальный порядок).

Если вы проверите свой пример в Firefox, он должен работать должным образом (их реализация Array.sort отличается), в то время как в Chrome это не (нестабильно). Вы можете надеяться, что эта небольшая функция исправлена.

+0

Если у кого-то есть более глубокое понимание этого (предполагаемого, непреднамеренного?), Я люблю это слышать! Также подтвердить/исправить мою проблемную гипотезу. –

+0

установка метки для каждой точки данных, похоже, работает. Я установил labelrank для каждой точки данных в предпочтительной серии, и все они отображаются. Спасибо! – lamarant

+0

ps: IMO свойство «labelrank» для каждой серии имеет смысл с рангом по умолчанию, являющимся порядком добавления каждой серии в диаграмму. – lamarant

Смежные вопросы