带有 DataLoader 的 Ng2-Admin 模板图表答案

【问题标题】：Ng2-Admin template charts with DataLoader带有 DataLoader 的 Ng2-Admin 模板图表
【发布时间】：2017-06-14 02:31:37
【问题描述】：

我正在尝试使用在另一台服务器（或确切地说是端口）上运行的 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 时，我都会在控制台中添加一个日志行，以显示发出请求。当 ng2-admin 页面重新加载时，我没有看到任何请求。

当我犯一些错误并看到错误消息时，我可以查看它，但没有任何错误消息。

我可以使用一些帮助来解决这个问题。如果需要更多信息，我很乐意分享。

谢谢！

【问题讨论】：

您是否在应用程序的某处包含了 dataLoader 插件 (dataloader.min.js)？
不，我没有。我是 Angular2 和 ng2-admin 模板的新手。通过反复试验找出东西是如何工作的 :) 我不知道要添加通常的包含语句
明白了。 :) 我也不熟悉 Angular2 或 Typescript，但是您目前在您的应用程序中包含 amcharts js 文件（amcharts.js、serial.js 等），您需要在图表库，它应该使数据加载器配置真正为您工作。
确实明白了！在您发表评论后，我仍然不知道将这些包含放在哪里，就像我以前在古代纯脚本中所做的那样，所以我搜索了 ng2-admin 应用程序的 /src 文件夹并找到了正确的位置。在 ng2-admin/src/app/theme/components/baAmChart/baAmChart.component.ts 是位于的导入。我添加了 dataloader.js 导入，现在我看到一些数据正在加载！非常感谢！！

标签： javascript angular amcharts ng2-admin

【解决方案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';

我刚刚添加了数据加载器导入

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

这解决了“不加载”的问题。当然也可以在这里添加其他插件。

再次感谢您将我指向 dataloader.js xorspark！

【讨论】：