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で置き換えました。

私はvalueFieldとCategoryFieldの値を、私のAPIが返す要素で置き換えました。私が知っている限り、そのトリックを行う必要があります。 ページをリロードすると、グラフが表示されません。

データを返すAPIをテストしました。私は、リクエストが行われたことを示すAPIが呼び出されるたびにコンソールにログ行を追加しました。 ng2-adminページがリロードされたときにリクエストが行われていないことがわかります。

エラーを表示してエラーメッセージが表示されたら、それを調べることができますが、エラーメッセージはまったくありません。

私はこれを理解する助けをいくつか使うことができます。より多くの情報が必要な場合は、私は共有することをうれしく思います。

ありがとうございます！

Answer 1

次のように、同じ機能を探しているいずれかのために、解決策は次のとおりです。

xorsparkが述べたように：あなたは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を指名してくれてありがとう！