使用DataLoader的Ng2-Admin模板圖表

我正嘗試使用在另一臺服務器上運行的API（或確切的端口）將數據加載到ng2-admin模板中的某些圖表中。使用DataLoader的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頁面重新加載時，我看不到任何請求。

當我犯了一些錯誤，並看到一個錯誤消息，我可以看看，但沒有任何錯誤消息。

我可以用一些幫助來解決這個問題。如果需要更多信息，我會很樂意分享。

謝謝！

來源

2017-06-13 Arno

您是否在應用程序的某處包含dataLoader插件（'dataloader.min.js'）？ – xorspark

不，我沒有。我是Angular2和ng2-admin模板的新手。通過反覆試驗找出東西是如何工作的:)我不知道是否要添加通常的include語句 – Arno

難題。 :)我對Angular2或Typescript也不熟悉，但是您目前在應用中包含amcharts js文件（'amcharts.js'，'serial.js'等），您需要包含dataloader插件後圖表庫，這應該使dataloader配置實際上爲你工作。 – xorspark

因此，對於任何一個誰是尋找相同的功能，該解決方案如下：

由於xorspark指出：使用的DataLoader功能，你應該包括dateloader.js或dataloader.min.js 但是，作爲Angular框架/ CLI框架（不知道是哪一個造成這種情況）默認情況下不使用常規結構，我有點困惑。在NG2 - 管理模板的源搜索瞭解到，該文件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';

解決了「不加載」問題。當然，也可以在這裏添加其他插件。

再次感謝您指點我datoraader.js xorspark！

來源

2017-06-13 18:31:37 Arno

使用DataLoader的Ng2-Admin模板圖表

回答

相關問題