Highcharts: полностью настраиваемые позиции меток на оси X - PullRequest
Новая
       29

Highcharts: полностью настраиваемые позиции меток на оси X

0 голосов
/ 28 июня 2018

Я пытаюсь составить гистограмму с использованием старших диаграмм, но данные упаковываются сервером, поэтому, насколько я могу судить, я не могу использовать тип диаграммы гистограммы.

Вот мой график: 

Highcharts.chart('container', {
  credits: {
    enabled: false
  },
  title: {
    text: null
  },
  xAxis: {
    type: 'category',
    labels: {
      rotation: -45
    }
  },
  series: [
    {
      type: 'variwide',
      showInLegend: false,
      data: [
        { name: '0.00 - 10.10', y: 13, z: 1260000 },
        { name: '10.10 - 34.14', y: 10, z: 3000000 },
        { name: '34.14 - 54.56', y: 9, z: 2550000 },
        { name: '54.56 - 71.43', y: 15, z: 2110000 },
        { name: '71.43 - 102.09', y: 4.6, z: 3830000 },
        { name: '102.09 - 161.56', y: 1.8, z: 7430000 },
        { name: '161.56 - 217.26', y: 5.7, z: 6960000 },
        { name: '217.26 - 301.65', y: 0.7, z: 10550000 },
        { name: '301.65 - 382.82', y: 2.8, z: 10150000 },
        { name: '382.82 - 874.80', y: 0.2, z: 61500000 }
      ]
    }
  ]
});
#container {
	max-width: 800px;
	min-width: 380px;
	margin: 0 auto;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/variwide.js"></script>

<div id="container"></div>

Как видите, этикетки выглядят довольно плохо.

Два решения, ни одно из которых я не могу решить, как это сделать:

  • Переименуйте точки (я могу это сделать) и переместите их вправо так, чтобы они находились под галочками
  • Лучшее решение: сделать ось X линейной, чтобы метки появлялись в естественных местах, как обычно на линейном графике, аналогично https://www.highcharts.com/demo/histogram. Смена оси на линейную, кажется, все испортила на графике, хотя…

Есть идеи?

1 Ответ

0 голосов
/ 03 июля 2018

Серия Variwide не поддерживает неклассифицированную ось x. На github сообщается о проблеме: https://github.com/highcharts/highcharts/issues/7359

Обход:

Variwide можно смоделировать с помощью ряда столбцов.

Создайте отдельные серии для каждой точки и свяжите их вместе, поместив linkedTo: ':previous' в каждую из них (кроме первой). Затем установите pointRange для каждой серии. pointRange является свойством серии и не может быть назначено отдельным точкам - поэтому для каждой точки должна быть составлена ​​отдельная серия. 

  series: [{
    data: [
      [5, 99]
    ],
    pointRange: 2
  }, {
    linkedTo: ':previous',
    data: [
      [7.5, 72]
    ],
    pointRange: 3
  }, {
    linkedTo: ':previous',
    data: [
      [14, 111]
    ],
    pointRange: 10
  }]

x положение точки указывает на середину столбца. Так что если x = 5 и pointRange = 2, то столбец будет охватывать от 4 до 6.

К сожалению, Highcharts плохо обрабатывает экстремумы при использовании нескольких значений pointRange. Установка минимальной оси x фиксирует это: 

  xAxis: {
    min: 9, // 4 (axis' minimum) + 10 (max point range) / 2 = 9
  },

Эти plotOptions необходимы для достижения правильной ширины столбцов: 

  grouping: false,
  groupPadding: 0,
  pointPadding: 0,

Демонстрационная версия: http://jsfiddle.net/BlackLabel/27gr3wh8/

Ссылка API: https://api.highcharts.com/highcharts/

...