New doughnutLabel does not take spacing into account
評価
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 初心者へのやさしさ
- 35/100
- issue の種類
- バグ
- 明瞭さ
- おおむね明確
- 活発さ
- 停滞
- 技術スタック
- chart.js, javascript
調査の方向性
まず、半径の計算、drawArc、getFitRatio に関連するリンク先の行にある src/types/doughnutLabel.js を読みます。spacing の例と、spacing が innerRadius を超えるケースを再現します。完了条件は、spacing によってラベルサイズも制限され、過大な spacing によって負の Canvas アーク半径が生成されなくなることです。
索引モデルが issue の本文から書いたものです。
説明
In #825, a centered doughnut label annotation was added, though the spacing option does not seem to reduce the label size, only the border and background sizes.
Ideally, I want to maximize the font size for the center label, while still keeping some padding around the label, so it doesn't hug the inside of the doughnut chart like it does now. Before the doughnutLabel annotation, I used my own plugin based on this StackOverflow answer, and there I can just add some padding around the label.
For example, with the text in blue, the background color in green, and in this case a spacing of 10, results in the background correctly getting padding, but the label is still the same size as if there was no spacing.
Additional bug: when increasing the spacing parameter until it becomes bigger than the innerRadius, results in the following error being thrown from the drawArc function:
IndexSizeError: Failed to execute 'arc' on 'CanvasRenderingContext2D': The radius provided (-38.5) is negative.
As used here (with _radius):
https://github.com/chartjs/chartjs-plugin-annotation/blob/0d6246df894560217ed2bf5ce1ded050b400f3df/src/types/doughnutLabel.js#L188
Caused by this subtraction:
https://github.com/chartjs/chartjs-plugin-annotation/blob/0d6246df894560217ed2bf5ce1ded050b400f3df/src/types/doughnutLabel.js#L139
On another note, this function:
https://github.com/chartjs/chartjs-plugin-annotation/blob/0d6246df894560217ed2bf5ce1ded050b400f3df/src/types/doughnutLabel.js#L157-L160
could also use the built-in Math.hypot function, like so:
function getFitRatio({width, height}, radius) {
return (radius * 2) / Math.hypot(width, height);
}
- 主要言語
- JavaScript
- スター
- 623
- フォーク
- 377
- 平均マージ
- 1日 9時間
- マージ済み PR（30日）
- 1
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートなし
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
chartjs/chartjs-plugin-annotation のほかの issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 48/100
-
難易度 5/5 1週間以上 初心者へのやさしさ 35/100
-
難易度 4/5 3〜5日 初心者へのやさしさ 35/100
-
TypeScript type issues対応中かも @joshkel が 450 日前に担当しました。 オープン
難易度 4/5 3〜5日 初心者へのやさしさ 38/100
chartjs/chartjs-plugin-annotation の issue をすべて見る
似ている issue
-
難易度 1/5 1時間未満 初心者へのやさしさ 83/100
module-federation/core#5205 ·
メンテナーはふだん 1 日以内に返信
-
affects:v0.5.2 area:frontend audit:ui-ux-2026-10 bug priority:P2
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
berntpopp/kidney-genetics-db#326 ·
メンテナーはふだん 1 日以内に返信
-
task
難易度 1/5 1時間未満 初心者へのやさしさ 83/100
TAMULib/fw-registry#550 ·
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 79/100
-
NWCWalletService.subscribe: response is never published if the handler finishes after unsubscribe (regression in 8.1.0)対応中かも @ajaysehwal が今日担当しました。 オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 83/100