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时都会向控制台添加一个日志行，显示请求。当重新加载ng2-admin页面时，我看不到任何请求。

当我发出错误并看到错误消息时，我可以查看，但是没有任何错误消息。

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

谢谢！

Answer 1

因此，对于任何正在寻找相同功能的人来说，解决方案如下：

正如xorspark所说：要使用dataLoader功能，您应该包含dateloader.js或dataloader.min.js 但是由于Angular框架/ CLI框架（不确定是哪一个导致这种情况）默认情况下不使用常规结构，所以我有点困惑。在ng2-admin模板的源代码中搜索了解到文件baAmChart.compo nent.ts包含amchart的导入（＆＃34;替换＆＃34;）：

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

我刚添加了dataloader import

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

解决了＃34;没有加载＆＃34;问题。当然，人们可以在这里添加其他插件。

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

带有DataLoader的Ng2-Admin模板图表

1 个答案: