2016-04-23 3 views
0

Так что я highchart, где я хотел бы показать datalabels только на первой точке каждого стека (т.е. там, где 0 точка)Highcharts, обнаружить, если точка находится первый в стеке

мой конфиг выглядит следующим образом:

{ 

    chart: {type: 'bar'}, 

    plotOptions: { 
    series: { 
     stacking: 'percent', 
     dataLabels: { 
     enabled: true, 
     allowOverlap: true, 
     formatter: function() { 
      if (pointIsFirstInStack(this)) { 
      return labelFunction(this); 
      } 
      return ''; 
     } 
     } 
    } 
    }, 

    series: [{ 
    name: 'Available', 
    data: [ 
     {x: 'Event1', y: 18}, 
     {x: 'Event2', y: 20} 
    ] 
    }, { 
    name: 'Purchased', 
    data: [ 
     {x: 'Event1', y: 23}, 
     {x: 'Event2', y: 40} 
    ] 
    }] 
} 

Но я с трудом реализую функцию pointIsFirstInStack, любые идеи?

С уважением,

Эйнар

JSFiddle, чтобы проиллюстрировать мою диаграмму: http://jsfiddle.net/qam37suh/

редактирования: добавлен ряд и штабелирования к примеру конфигурации edit2: добавлена ​​JSFiddle

+0

Нечто подобное [это] (http://jsfiddle.net/mzy0wadb/)? –

+0

Можете ли вы опубликовать всю конфигурацию диаграммы?Я хотел бы посмотреть, как ваши данные стекаются –

+0

Я добавил для вас больше настроек @LucaRegazzi – Nordfjord

ответ

1

Вы можете проверить серию индекс.

Если вы всегда будете иметь две серии, вы можете проверить это следующим образом:

formatter: function(){ 
    return this.series.index == 1 ? this.x : null; 
} 

Пример:

Highcharts укладывает серию в обратном направлении, по умолчанию, поэтому индекс 0 укладывается сверху.

Если вы собираетесь иметь динамическое число серий, вы можете добавить проверку на количество серий первого, так что вы все еще проверки последней серии:

formatter: function(){ 
    var len = this.series.chart.series.length -1; 
    return this.series.index == len ? this.x : null; 
} 

Пример:

(Вы также можете установить reversedStacks: false на вашем yAxis, и вместо того, чтобы просто проверить для index == 0

Пример:

)

Или, если ваша цель состоит в том, чтобы поставить категории внутри серии, а не снаружи, вы могли бы просто переместить их:

xAxis: { 
    categories: ['Event1', 'Event2'], 
    labels: { 
    x: 60, 
    style: { 
     fontWeight: 'bold', 
     color: 'rgba(255,255,255,0.75)' 
    } 
    } 
} 

Пример:

+0

Удивительный, который сработал ... не знал о обратная укладка вещь – Nordfjord

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