我正在尝试使用在另一台服务器(或者确切地说是端口)上运行的 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 页面重新加载时,我看到没有发出任何请求。
当我犯一些错误并看到错误消息时,我可以查看该错误消息,但没有任何错误消息。
我需要一些帮助来解决这个问题。如果需要更多信息,我很乐意分享。
谢谢!
最佳答案
因此,对于任何正在寻找相同功能的人来说,解决方案如下:
正如 xorspark 所说:要使用 dataLoader 功能,您应该包含 dateloader.js 或 dataloader.min.js 但由于 Angular 框架/CLI 框架(不确定是哪一个导致了这种情况)默认情况下不使用常规结构,我有点困惑。 在 ng2-admin 模板的源代码中搜索发现文件 baAmChart.component.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!
关于javascript - 使用 DataLoader 的 Ng2-Admin 模板图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44523707/