Highcharts stacked column: показать общее количество, когда стек скрыт

У меня есть таблица столбчатых столбцов с тремя стеками на столбец. См. https://jsfiddle.net/Lfvnraqd/1/Highcharts stacked column: показать общее количество, когда стек скрыт

Всплывающая подсказка показывает номера для отдельного стека, а также общее количество всех трех стеков (т. Е. Общее количество всех разбирательств в год). Это работает отлично, пока отображаются все стеки. Но когда я скрываю один или два стека, нажимая на соответствующий элемент в легенде, общее число, отображаемое в всплывающей подсказке, равно количеству всех видимых стеков, но я хочу, чтобы он все еще показывал общее количество всех трех стеков. Если возможно, без необходимости иметь отдельную серию для общих чисел.

Есть ли способ сделать это?

Код:

$(function() { 
Highcharts.setOptions({ 
    colors: ['#f59000', '#2274c1', '#90aaef'] 
}); 
$('#container').highcharts({ 
chart: { 
    borderColor: '#cccccc', 
    borderWidth: 2, 
    marginTop: 43, 
    type: 'column' 
    }, 
xAxis: { 
     categories: ['2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015'], 
     tickLength: 20 
    }, 
    yAxis: { 
     min: 0, 
     max: 45, 
     reversedStacks: false, 
     tickInterval: 5, 
     title: { 
      text: null 
     }, 
     stackLabels: { 
      enabled: true, 
      style: { 
       fontWeight: 'bold', 
       color: (Highcharts.theme && Highcharts.theme.textColor) || 'black' 
      } 
     } 
    }, 
    credits: { 
     enabled: false 
    }, 
    title: { 
    text: 'Number of procedures per year', 
    y: 18 
    }, 
tooltip: { 
     headerFormat: '<b>Year {point.x}</b><br/>', 
     pointFormat: '{series.name}: {point.y}<br/>Total procedures: {point.stackTotal}' 
    }, 
plotOptions: { 
     column: { 
      stacking: 'normal', 
      dataLabels: { 
       enabled: true, 
       color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white' 
      } 
     } 
    }, 
series: [{ 
     name: 'Resolved before conciliation', 
     data: [14, 12, 10, 13, 10, 7, 11, 11, 11, 8, 8, 10] 
    }, { 
     name: 'Conciliation successful', 
     data: [2, 4, 5, 1, 2, 7, 6, 4, 1, 1, 3, 0] 
    }, { 
     name: 'Expert\'s decision', 
     data: [7, 13, 20, 10, 20, 19, 20, 26, 25, 19, 18, 17] 
    }] 
}); 
});

источник

2017-01-18 MacCrack

Сумма всех точек на самого начало и используйте pointFormatter для доступа к суммам - см. пример https://jsfiddle.net/Lfvnraqd/2/ – morganfree

Это хорошо работает, спасибо. Где я могу найти документацию по продвинутым вещам вроде этого? – MacCrack

@morganfree Не могли бы вы преобразовать свой комментарий в ответ, чтобы я мог его принять? – MacCrack

Суммирование точек значения должны быть сделаны вручную, поскольку схема работает только на видимых данных.

Перед тем, как установить данные в таблице, рассчитать его сумму:

var data1 = [14, 12, 10, 13, 10, 7, 11, 11, 11, 8, 8, 10]; 
var data2 = [2, 4, 5, 1, 2, 7, 6, 4, 1, 1, 3, 0]; 
var data3 = [7, 13, 20, 10, 20, 19, 20, 26, 25, 19, 18, 17] 

var sums = Object.keys(data1).map(i => { 
    return data1[i] + data2[i] + data3[i]; 
});

и получить доступ сумму Свойс в tooltip.pointFormatter

pointFormatter: function() { 
    return this.series.name + ': ' + this.y + '<br/>Total procedures: ' + sums[this.x]; 
}

Пример: https://jsfiddle.net/Lfvnraqd/2/

источник

2017-01-19 19:22:42 morganfree

Highcharts stacked column: показать общее количество, когда стек скрыт

ответ

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