Шаблонные диаграммы Ng2-Admin с DataLoader

Question

Я пытаюсь загрузить данные в некоторые диаграммы в шаблоне ng2-admin, используя API, запущенный на другом сервере (или, если быть точным, порт).

Мой код внутри lineChart.service.ts выглядит следующим образом:

return {
  type: 'serial',
  theme: 'blur',
  marginTop: 15,
  marginRight: 15,
  responsive: {
    'enabled': true
  },
  dataLoader: {
    url: 'http://localhost:4000/reporting/temperatures',
    format: 'json',
    showErrors: true,
    noStyles: true,
    async: true
  },

  categoryField: 'MeasureMoment',
  categoryAxis: {
    parseDates: true,
    gridAlpha: 0,
    inside: true,
    color: layoutColors.defaultText,
    axisColor: layoutColors.defaultText
  },
  valueAxes: [
    {
      minVerticalGap: 50,
      gridAlpha: 0,
      color: layoutColors.defaultText,
      axisColor: layoutColors.defaultText,
      labelFunction: this.formatLabel
    }
  ],
  graphs: [
    {
      id: 'g0',
      bullet: 'none',
      useLineColorForBulletBorder: true,
      lineColor: colorHelper.hexToRgbA(graphColor, 0.3),
      lineThickness: 1,
      negativeLineColor: layoutColors.danger,
      type: 'smoothedLine',
      valueField: 'Temperature',
      fillAlphas: 1,
      fillColorsField: 'lineColor'
    }
  ],
  chartCursor: {
    categoryBalloonDateFormat: 'MM YYYY',
    categoryBalloonColor: '#4285F4',
    categoryBalloonAlpha: 0.7,
    cursorAlpha: 0,
    valueLineEnabled: true,
    valueLineBalloonEnabled: true,
    valueLineAlpha: 0.5
  },
  dataDateFormat: 'MM YYYY',
  export: {
    enabled: true
  },
  creditsPosition: 'bottom-right',
  zoomOutButton: {
    backgroundColor: '#fff',
    backgroundAlpha: 0
  },
  zoomOutText: '',
  pathToImages: layoutPaths.images.amChart
};

Это не что иное, как страница по умолчанию, за исключением части данных, где в исходном шаблоне есть элемент dataProvider с данными в нем, и я заменил его на dataLoader, который я успешно использовал ранее.

Я заменил значения valueField и CategoryField на элементы, которые возвращает мой API. Насколько я знаю, это должно сработать. Когда я перезагружаю страницу, я не вижу никакой диаграммы.

Я проверил API, который возвращает данные. Я добавлял строку журнала в консоль каждый раз, когда вызывался API, показывающий, что сделан запрос. Я не вижу никаких запросов при перезагрузке страницы ng2-admin.

Когда я делаю какую-то ошибку и вижу сообщение об ошибке, я могу посмотреть на это, но сообщения об ошибке нет вообще.

Я мог бы использовать некоторую помощь, чтобы выяснить это. Если потребуется дополнительная информация, я буду рад поделиться.

Спасибо!

Answer 1

Итак, для любого, кто ищет ту же функциональность, решение выглядит следующим образом:

Как указано в xorspark: для использования функциональности dataLoader вы должны включить dateloader.js или dataloader.min.js. Но в качестве структуры Angular Framework / CLI (не уверен, какая именно это вызывает) не используются обычные структуры по умолчанию, я был немного смущен. Поиск в источнике шаблона ng2-admin обнаружил, что файл baAmChart.compo‌ nent.ts содержит импорт ("замены") для amchart:

import 'amcharts3';
import 'amcharts3/amcharts/plugins/responsive/responsive.js';
import 'amcharts3/amcharts/serial.js';

Я только что добавил импорт загрузчика данных

import 'amcharts3/amcharts/plugins/dataloader/dataloader.js';

Это решило проблему "не загрузки". И, конечно, здесь можно добавить другие плагины.

Еще раз спасибо за указание мне на xorspark dataloader.js!