Диаграмма паутины с различными диапазонами осей (параллельные координаты)

Question

У меня есть угловой сервис, который предоставляет конфигурацию highcharts для highcharts-ng.Я готовлю данные для этой службы в контроллере, а затем вызываю службу с данными в качестве параметра.Все работают.Но если мой диапазон, например, примерно такой [15,130,0.2], моя диаграмма паутины будет немного сжата.Поэтому я хотел бы сделать разные масштабы оси, и я нашел решение, используя parallel-coordinates.js.

И у меня есть проблема, чтобы это работало.Первая картинка - это то, что у меня есть, а вторая - то, чего я хотел бы достичь.

Что у меня есть: https://jsfiddle.net/DuFuS/en51rbxc/

Что я хочу: http://jsfiddle.net/DuFuS/tbzfhou5/

Answer 1

Прежде всего (и самое главное), вы используете очень старую версию пакета highcharts-ng, и поэтому модуль parallel-coordinates.js не работает должным образом.

Этот модуль создает дополнительныеоси, основанные на количестве данных, переданных конструктору диаграммы, но в этой версии пакета, data, к сожалению, является пустым объектом в init диаграммы, поэтому модуль parallel-coordinates.js вообще не добавляет никакой дополнительной оси.

Следующими вещами, которые вызывают проблемы, являются опечатки в конфигурации:

chart: {
  parallerlCoordinates: true,
  parallerAxes: {
...

Должно быть parallelCoordinates и parallelAxes.

Чтобы ваша диаграмма работала, пожалуйста,обновите версию пакета highcharts-ng до 1.2.1, затем перестройте объект конфигурации (поскольку структура изменилась с новой версией), как показано ниже:

return {
      chart: {
        parallelCoordinates: true,
        parallelAxes: {
          gridLineWidth: 0,
          lineWidth: 2,
          showFirstLabel: false,
          showLastLabel: true
        },
        polar: true,
        type: 'line'
      },
      xAxis: {
        categories: data.categories,
        tickmarkPlacement: 'on',
        lineWidth: 0
      },
      yAxis: {
        gridLineInterpolation: 'polygon',
        lineWidth: 0,
        min: 0
      },
      series: data.series
    };

После всех изменений диаграмма будет выглядеть так, как выожидается.

Живой пример: https://jsfiddle.net/rza5uk67/

Пакет документов: https://github.com/pablojim/highcharts-ng