Как сделать это как HighChart (картинка прилагается) - PullRequest
Новая
       3

Как сделать это как HighChart (картинка прилагается)

0 голосов
/ 26 сентября 2019

эксперты Highchart!Я хотел бы сделать следующий график (используя платформу Highcharts) и не знаю, с чего начать.Могу ли я наложить несколько графиков на один?Как бы я создал коробки с диапазонами в виде картинок в прикрепленном примере?У кого-нибудь есть примеры?

example chart

1 Ответ

1 голос
/ 27 сентября 2019

Вы можете достичь этого, используя серию columnrange с двумя сериями стеков.Первая серия представит колонку от мин до середины, вторая от середины до макс.Для построения точек используйте другой ряд типа scatter.Проверьте демо и код, указанный ниже.

Код: 

Highcharts.chart('container', {
  chart: {
    type: 'columnrange'
  },
  xAxis: [{
    categories: ['1', '2', '3', '4', '5']
  }, {
  	visible: false,
  	min: 0,
    max: 100
  }],
  yAxis: {
  	min: 0,
    max: 100
  },
  plotOptions: {
  	series: {
    	stacking: 'normal'
    }
  },
  series: [{
  	id: 'main',
    name: 'Grades',
    data: [
      [20, 25], // min, min
      [30, 40],
      [30, 50],
      [35, 55]
    ]
  }, {
  	linkedTo: 'main',
    data: [
      [25, 35], // mid, max
      [40, 50],
      [50, 80],
      [55, 70]
    ]
  }, {
  	type: 'scatter',
    xAxis: 1,
    name: 'Eployees',
    data: [
    	[8, 30],
      [8.5, 25],
      [9, 15],
      [9.5, 28],
      [10, 33],
      [10.5, 25],
    ]
  }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Демо:

Ссылка API:

...