Пузырьковая диаграмма Highchart: показать значение оси Y в виде числового диапазона

У меня есть один Bubble Highchart, и мне нужно отобразить значение цены по оси Y в виде диапазона цен, например «1–10», 11–20, «21–30».

Но я не могу добиться того же.

Как я могу этого добиться?

Здравствуйте, ppotaczek, Большое спасибо за быстрый ответ. Я пытаюсь создать пузырьковую диаграмму с помощью скриншота ниже.

Пожалуйста, обратитесь к этому снимку экрана

Спасибо


person Ghanshyam Dabhi    schedule 10.09.2018    source источник
comment
Пожалуйста, включите минимальный воспроизводимый пример, когда задаете вопросы, без этого вам будет сложно дать ответ.   -  person ewolden    schedule 10.09.2018


Ответы (1)


Вы можете просто использовать функцию formatter:

yAxis: {
  labels: {
    tickInterval: 25,
    formatter: function() {
      if (this.value > 0) {
        return this.value - 24 + ' - ' + (this.value);
      }
      return this.value;
    }
  },
}

Демонстрация в реальном времени: https://jsfiddle.net/BlackLabel/3rqdn5pj/

Ссылка на API:

https://api.highcharts.com/highcharts/yAxis.tickInterval

https://api.highcharts.com/highcharts/yAxis.labels.formatter

person ppotaczek    schedule 10.09.2018
comment
Здравствуйте, ppotaczek, Большое спасибо за быстрый ответ. Я пытаюсь создать пузырьковую диаграмму с помощью скриншота ниже. Пожалуйста, обратитесь к скрин-шоу i.stack.imgur.com/zLDm8.png - person Ghanshyam Dabhi; 14.09.2018
comment
Привет, Ганшьям Дабхи, здесь вы можете найти пример создания диаграммы такого типа: jsfiddle.net/BlackLabel/0vfx94md - person ppotaczek; 14.09.2018
comment
Здравствуйте, ppotaczek, Спасибо. Я взял ссылку из вашего примера. Мне нужно добавить больше серий в диаграмму, скажем, для Бренда-1 и Бренда-2 для Рубашек. Я провел несколько экспериментов на вашем примере, но не смог добиться того же. Пожалуйста, обратитесь к i.stack.imgur.com/qUaxW.png - person Ghanshyam Dabhi; 15.09.2018
comment
Здравствуйте, Ghanshyam Dabhi, в этом случае вам следует использовать плагин Grouped Categories: blacklabel.github.io/grouped_categories Живой пример: jsfiddle.net/BlackLabel/601eptc4 - person ppotaczek; 17.09.2018
comment
Здравствуйте, ppotaczek, еще раз спасибо. Точно, используя метод сгруппированных категорий, я выполнил требование. И еще один вопрос, пожалуйста, есть ли другой способ добиться того же? - person Ghanshyam Dabhi; 19.09.2018
comment
Я рад, что смог помочь, вы можете проголосовать и принять ответ: stackoverflow.com/help/someone-answers. Что касается вашего последнего вопроса: да, вы можете использовать Highcharts.SVGRenderer, живой пример: jsfiddle.net/BlackLabel/cndx7j2q - person ppotaczek; 19.09.2018
comment
Здравствуйте, ppotaczek, я принял ваш ответ, очень полезный, спасибо. Я экспериментирую с SVGRenderer. - person Ghanshyam Dabhi; 20.09.2018
comment
Привет, ppotaczek, спасибо, я провел несколько экспериментов с SVGRenderer. Теперь я пытаюсь реализовать то же самое в vaadin-flow chart версии-6.1.0, но я сталкиваюсь с некоторыми проблемами при достижении того же самого. Возможно ли добиться того же в vaadin-flow? - person Ghanshyam Dabhi; 21.09.2018
comment
Я не знаю vaadin-flow-схему, поэтому не смогу вам помочь. Я думаю, вам следует открыть новую тему на stackoverflow. Если в будущем у вас возникнут вопросы о Highcharts, я постараюсь помочь. - person ppotaczek; 21.09.2018
comment
Здравствуйте, ppotaczek, Большое спасибо. Я открою новую тему о том же на stackoverflow. На самом деле блок-схема vaadin использует Highcharts для внутреннего использования, поэтому я думаю, что вы можете иметь представление об этом. :) - person Ghanshyam Dabhi; 21.09.2018
comment
Здравствуйте, ppotaczek, я задавал тот же вопрос на форуме vaadin. Спасибо - person Ghanshyam Dabhi; 25.09.2018