Chart.jsとng2-chartsは初めてです。chart.js のこの機能を ng2-charts で書き直してほしい。それは可能ですか？

これが私のフィドルです：https://jsfiddle.net/haq5k2mw/

ng2-chartsangular 2アプリで使用しようとしていますが、問題に直面しています

app.ts

問題なし表示

ng2-charts ( https://github.com/valor-software/ng2-charts ) を使用して、Angular 2 アプリケーションの折れ線グラフを作成しています。グラフは問題なく動作します。ポイントにカーソルを合わせると、ポイントが自動的に白に変わり、マウスでポイントされていることが示されます。この動作を模倣したいのですが、コードを介して手動で行います。

クリックしてポイントにカーソルを合わせると、チャートを含むオブジェクトを返すクリック イベントがあります (画像を参照)。そのオブジェクトから、ポイントの半径を制御しているように見えるいくつかの値を見つけることができました: _model.hitRadius、_model.radius、_view.hitRadius、および _view.radius (画像を参照)。

コードでこれらの値を変更しようとしましたが、チャート ポイントに何も起こりません。

値を変更した後に「e.update()」も追加しようとしましたが、update() は関数ではないというエラーが表示されます。

ソースコードは https://github.com/DeronLee/Fitness.gitにあります。

画面に何も出力されなくても、すでに機能していました。

http://valor-software.com/ng2-charts/に従って、いくつかのグラフを追加したいと思います。棒グラフと折れ線グラフを試しました。すべてが正常に機能しましたが、チャートは常に何もありません。

コンポーネント ファイル:

html

Angular 2 Web アプリケーションでng2-chartsコンポーネントを使用してチャートを表示しています。既製のサンプルは、Angular と TypeScript を使用して Web ページにグラフを表示するというかなりのアイデアを与えてくれました。

HTML Web ページの Angular タグ

タイプスクリプト

ただし、各ウィジェットがチャート コンポーネントを持つ複数のデータ ウィジェットの場合。データをチャートにバインドするにはどうすればよいですか?

statusプロパティを探して、 siteDataオブジェクトのリストをループします。このプロパティをチャート データに割り当てます。

ただし、これは機能しません。データを文字列として受け入れています.!!!

例: ステータス (データ型番号) が 85 の場合、

チャートはこれをそれぞれ「8」と「5」として受け入れます。

しかし、これを単純なタグで検証すると、

口ひげ (ダブル カール ブレース)

必要なデータを取得します。つまり、 85 が印刷されます

データをチャートに割り当てる際にどこが間違っているのかわかりません。

正しい方向へのガイダンスは大歓迎です

ng2-charts デモ ページの指示に従ってセットアップを行いました。angular-cli を使用しているので、System.JS を使用してパッケージもインポートしました。次に、デモ コードをコピーしましたが、表示されません。キャンバスは作成されていますが、グラフは描画されていません。コンポーネントとテンプレート コードは、こことまったく同じです。