帶有DataLoader的Ng2-Admin模板圖表

Question

我正在嘗試使用在另一台服務器（確切地說是端口）上運行的API將數據加載到ng2-admin模板中的某些圖表中。

我在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，我之前已經成功使用過。

我用我的API返回的元素替換了valueField和CategoryField值。 據我所知，應該可以解決問題。 重新加載頁面時，我看不到任何圖表。

我已經測試了API，該API返回數據。 每當調用API時，都會向控制台添加一個日志行，以顯示請求。 重新加載ng2-admin頁面時，我看不到任何請求。

當我犯一些錯誤並看到錯誤消息時，我可以調查一下，但是沒有任何錯誤消息。

我可以幫忙弄清楚這一點。 如果需要更多信息，我將很高興與您分享。

謝謝！

Answer 1

因此，對於正在尋找相同功能的任何人，解決方案如下：

正如xorspark所述：要使用dataLoader功能，您應該包括dateloader.js或dataloader.min.js。但是由於Angular框架/ CLI框架（不確定是哪個原因引起的）默認情況下不使用常規結構，所以我使用了有點困惑。 在ng2-admin模板的源代碼中進行搜索后發現，文件baAmChart.compo‌nent.ts包含amchart的導入（“替換”）：

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

我剛剛添加了dataloader導入

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

這就解決了“無法加載”的問題。 當然可以在這里添加其他插件。

再次感謝您將我指向dataloader.js xorspark！