問題タブ [angular-chart]

angular-chart.jsを使用して、angularJSにドーナツチャートがあります。

HTML ファイル:

JS ファイル:

ここにフィドルがあります: angularJS DoughnutChart

グラフの中央にテキストを追加し、凡例とツールチップを削除する必要があります。助けてください！

また、同じAngularJS donut Directiveの angularJS ディレクティブを見つけました。このディレクティブを使用してグラフを作成したいと考えています。同じために動作するjsFiddleは本当にありがたいです。

ありがとう

angular-charts.js を使用してあらかじめペアリングされた angularJS のドーナツ チャートがあります。グラフに透明な範囲を追加する必要があります (範囲は背景の色を使用する必要があります。また、グラフの特定のポイントにマーカーを追加する必要があります)。これは、charts.js とangular を使用して実行できますか。

API からのデータを表示するアプリを作成しようとしていますが、作業中にチャートに表示したい時間と日付の範囲を変更できます。

現在、基本的なデータの変更と戦っています。

私は単純なチャート コードを持っています: HTML:

そしてJS：

もちろん、それは長いコードの一部にすぎません。この部分でやりたいことは、ReloadChart()関数からの新しいデータでチャートをリロードすることです。しかし問題は、何も変わっていないということです。コンソールには「Reloading Chart」がありますが、チャートは同じままです。

私は何を間違っていますか？

angular-chart.js ( Chart.js を使用)を使用して棒グラフを作成しています。この下に同じデータを示すテーブルもあります。

私が抱えている問題は、表示されているデータを変更すると、Y 軸ラベルの幅が変更され、すべてがずれてスローされることです。次に例を示します。

最初の写真ではチャートとテーブルが整列されていますが、データが変更されると (最大 Y 軸ラベルが 4 文字から 3 文字減少)、2 番目の写真のようになります。

chart.js ドキュメントに何も見つかりませんでした。Y 軸ラベルの幅をグローバルに設定する方法はありますか?

ローカルではすべて正常に動作しますが、デプロイ時に何が問題なのかわかりません。

何かが不足しているように見えますが、必要なファイルはすべて正しい順序で存在します。

次のエラーがスローされ続けます。

私はディレクティブを使用していないので、これは Angular-Chart の問題である必要がありますか?

何か案は？

私は欲しいものを達成するためにAngular Chartsを使用しています.昨日私はそれをしましたが、今私のクライアントはいくつかの変更を望んでいます.

これが、チャートでそのデータをレンダリングするために使用しているコードです。今のところ"conversions : {}、オブジェクトの一部で遊んでいますtotal。amount

そしてここにHTML

これが結果です

要件の 1 つは、グラフに「金額」プロパティのみを表示する必要があることです。これは、グラフから灰色の線が消えることを意味します。もう 1 つの要件は、そこに表示されるツールチップにこれを配置する必要があることです。

$ 金額 (合計)、この場合は $150 (1)

では、この場合、私に何をするように勧めますか? それを行う方法はありますか？

このコードを使用して、角度チャートを画像としてエクスポートしています。

var canvas = document.getElementById(chartUnqId);

var content = canvas.toDataURL("image/png");

scope.chartImageUrl = コンテンツ;

これは正常に機能していますが、画像に凡例が含まれていません。凡例とキャンバスをpngとして保存する必要があります。

これが私のプランカーです。json オブジェクトをチャートに渡しwidth 100%ています。折れ線チャートと高さを 100px に指定したいのですが、高さを最小化すると css が期待どおりに機能しません。グラフは、親の div/パネルの高さと幅を取りません。

角度チャートを使用して、ページに棒グラフを作成しています。高さを 80 に設定して、ページをあまり占有しないようにしたいだけです。問題は、たとえばモバイルでページのサイズを小さくすると、グラフが押しつぶされて読みにくくなることです。キャンバスの高さを設定しないと、デスクトップでは大きすぎますが、768px より小さい画面サイズでは見栄えがします。

画面サイズが 768px を超える場合にキャンバスの高さを 80 に設定し、それよりも小さいサイズにデフォルト設定するにはどうすればよいですか。または、キャンバスの高さを 768px の上では 80 に設定し、それより小さいものでは 150 に設定します。

私はこれを理解しようとして髪を引っ張ってきました。

HTML:

いろいろ試してみましたが、キャンバスのサイズはまったく変わりません。

これが私の最後の試みです：

画面の幅全体をカバーするようにキャンバスの幅を維持しようとしていることに注意してください。これが、小さな画面でスキッシュ効果が得られる理由です。

これは、私がそれをいじるために使用してきたコードペンです:ここをクリック

これは、小さい画面での押しつぶし効果です。

そして、メディア クエリを使用して CSS で高さを設定しようとすると、次のようになります (javascript で設定する必要があると思います)。