Highcharts Boxplot - поле с нижним, верхним квартилем и медианой не отображается, когда min и max равны нулю для категории - PullRequest
Новая
       48

Highcharts Boxplot - поле с нижним, верхним квартилем и медианой не отображается, когда min и max равны нулю для категории

0 голосов
/ 02 апреля 2020

Перейдите к нижней скрипке и найдите, что в первой категории не отображается поле. я ожидаю, что на высоких графиках должны быть q1, q3 и медиана. Есть ли способ визуализации boxplot без min и max?

https://jsfiddle.net/rammohanreddy201/ga20p14y/28/

Highcharts.chart ('container', {

chart: {
    type: 'boxplot'
},

title: {
    text: 'Highcharts Box Plot Example'
},

legend: {
    enabled: false
},

xAxis: {
    categories: ['1', '2', '3', '4', '5'],
    title: {
        text: 'Experiment No.'
    }
},

yAxis: {
    title: {
        text: 'Observations'
    },
    plotLines: [{
        value: 932,
        color: 'red',
        width: 1,
        label: {
            text: 'Theoretical mean: 932',
            align: 'center',
            style: {
                color: 'gray'
            }
        }
    }]
},

series: [{
    name: 'Observations',
    data: [
        [null, 801, 848, 895, null],
        [733, 853, 939, 980, 1080],
        [714, 762, 817, 870, 918],
        [724, 802, 806, 871, 950],
        [834, 836, 864, 882, 910]
    ],
    tooltip: {
        headerFormat: '<em>Experiment No {point.key}</em><br/>'
    }
}, {
    name: 'Outliers',
    color: Highcharts.getOptions().colors[0],
    type: 'scatter',
    data: [ // x, y positions where 0 is the first category
        [0, 644],
        [4, 718],
        [4, 951],
        [4, 969]
    ],
    marker: {
        fillColor: 'white',
        lineWidth: 1,
        lineColor: Highcharts.getOptions().colors[0]
    },
    tooltip: {
        pointFormat: 'Observation: {point.y}'
    }
}]

});

1 Ответ

1 голос
/ 02 апреля 2020

Для реализованной логики c для серии boxplot требуется 6 или 5 значений в массиве или в объектах конфигурации данных - x,low,q1,median,q3,high. Дополнительно: https://api.highcharts.com/highcharts/series.boxplot.data и https://www.highcharts.com/docs/chart-and-series-types/box-plot-series

Однако, для low и high устанавливается одинаковое значение так как q1 делает их строки невидимыми (покрываются линией q1), так что это может быть хорошим обходным путем для ваших требований. Таким образом, конфигурация данных должна выглядеть следующим образом: 

data: [
  [801, 801, 848, 895, 801],
  [733, 853, 939, 980, 1080],
  [714, 762, 817, 870, 918],
  [724, 802, 806, 871, 950],
  [834, 836, 864, 882, 910]
],

Далее будет неплохо скрыть эти значения во всплывающей подсказке. Для этого мы можем использовать обратный вызов formatter : 

  tooltip: {
    formatter(tooltip) {
      let point = this.point;
      if (point.low === point.q1 || point.high === point.q1) {
        point.low = null;
        point.high = null;
      }
      return tooltip.defaultFormatter.call(this, tooltip);
    }
  },

Демо: https://jsfiddle.net/BlackLabel/rd4aLgne/

API: https://api.highcharts.com/highcharts/tooltip.formatter

...