Chart.js

#貢献する

ライブラリへの新しい投稿は歓迎されますが、次のガイドラインに従ってください。

  • 主要な追加や変更について PR を開く前に、予想される API や実装について話し合ってください。問題を提出する (新しいウィンドウが開きます)またはそれについて問い合わせるChart.js Slack (新しいウィンドウが開きます)#開発チャンネル。これにより、事前にフィードバックを取得することで開発時間を節約し、メンテナにより多くのコンテキストと詳細を提供することでレビューを迅速化します。
  • 変更がすべてのユーザーにとって役立つかどうか、または Chart.js を作成する場合に考慮してください。プラグインの方が適切でしょう。
  • コードがテストに合格することを確認し、eslintコード規格。pnpm testリンターとテストの両方を実行します。
  • 単体テストを追加し、新しい機能を文書化します (test/とdocs/それぞれのディレクトリ)。
  • 今後メジャー リリースが予定されている場合を除き、重大な変更は避けてください。メジャー リリースはめったにありません。私たちは人々に、ほとんどの新しい高度な機能用のプラグインを作成することを推奨し、下位互換性を重視します。
  • 新しいメソッドは可能な限りプライベートとして追加することを強くお勧めします。メソッドをプライベートにするには、トップレベルのメソッドを作成します。functionクラスの外側、または接頭辞を付けて_そして追加@privateクラス内の場合は JSDoc。パブリック API は、下位互換性を損なうことなく変更できる能力が限られているため、レビューにかなりの時間がかかり、実装後にロックされます。プライベート API により、予期せぬケースに柔軟に対応できます。

#プロジェクトに参加する

アクティブなコミッターと貢献者は、自己紹介をし、このプロジェクトへのコミット アクセスをリクエストするよう招待されます。非常に活発な Slack コミュニティがあり、ぜひご参加ください。ここ (新しいウィンドウが開きます)。ご協力いただけると思いますので、ぜひご協力ください。

#構築とテスト

まず、開発依存関係がインストールされていることを確認する必要があります。ノードと pnpm がインストールされている場合、Chart.js リポジトリをローカル ディレクトリに複製し、コマンド ラインでそのディレクトリに移動した後、次のコマンドを実行できます。

> pnpm install

これにより、Chart.js のローカル開発依存関係がインストールされます。

次のコマンドがリポジトリ ルートから使用できるようになりました。

> pnpm run build             // build dist files in ./dist
> pnpm run autobuild         // build and watch for source changes
> pnpm run dev               // run tests and watch for source and test changes
> pnpm run lint              // perform code linting (ESLint, tsc)
> pnpm test                  // perform code linting and run unit tests with coverage

pnpm run devとpnpm test仕様ファイル名と一致させるために使用される文字列を追加できます。例えば：pnpm run dev pluginsウォッチモードでカルマを開始しますtest/specs/**/*plugin*.js。

#ドキュメンテーション

を使用しておりますVuepress (新しいウィンドウが開きます)docs ディレクトリに Markdown ファイルとして含まれるドキュメントを管理します。次のコマンドを使用して、ドキュメント サーバーをローカルで実行できます。

> pnpm run docs:dev

#画像ベースのテスト

一部のディスプレイ関連機能は、一般的な Jasmine ユニットではテストすることが困難です。このため、画像ベースのテストを導入しました (#3988 (新しいウィンドウが開きます)と#5777 (新しいウィンドウが開きます)) チャートが予想される画像と一致するピクセルごとに描画されることをアサートします。

画像ベースのテストで生成されたチャートは次のようにする必要があります。できるだけ最小限に別の機能が壊れた場合の失敗を防ぐために、テストされた機能のみに焦点を当てます (スケールをテストするときにタイトルと凡例を無効にするなど)。

以下の手順に従って、新しいイメージベースのテストを作成できます。

  • JSファイルを作成します(例 (新しいウィンドウが開きます)) または JSON ファイル (例 (新しいウィンドウが開きます)) チャートの構成と生成オプションを定義します。
  • このファイルを追加しますtest/fixtures/{spec.name}/{feature-name}.json。
  • 追加行の説明 (新しいウィンドウが開きます)の始まりにtest/specs/{spec.name}.tests.jsまだ存在しない場合。
  • 走るpnpm run dev。
  • クリック"デバッグ"ボタン (上部/右): テストは失敗し、関連するキャンバスが表示されます。
  • チャート上で右クリックし、"画像を保存します..." test/fixtures/{spec.name}/{feature-name}.pngツールチップやホバー機能をアクティブにしないように注意してください。
  • ブラウザページを更新します(CTRL+R): テストは成功するはずです
  • 特徴値を変更してテストの関連性を検証する少しJSON ファイル内。

テストは両方のブラウザでパスする必要があります。一般に、異なるブラウザ間でテキストを渡すのは非常に難しいため、画像テストではすべてのテキストを非表示にします。そのため、画像ベースのテストではすべてのスケールを非表示にすることをお勧めします。アニメーションを無効にすることもお勧めします。それでもテストに合格しない場合は、調整してくださいtoleranceおよび/またはthreshold (新しいウィンドウが開きます)JSON ファイルの先頭にそれらを保持しますできるだけ低い。

テストが失敗すると、期待される画像と実際の画像が表示されます。テストに合格した場合でも画像を見たい場合は、"debug": trueJSON ファイル内。

#バグと問題

これらについては、GitHub ページ (次のアドレス) で報告してください。github.com/chartjs/Chart.js。サポートリクエストに問題を使用しないでください。 Chart.js の使用に関するヘルプについては、以下を参照してください。chart.js (新しいウィンドウが開きます)スタック オーバーフローのタグ。

適切に構造化された詳細なバグ レポートは、プロジェクトにとって非常に価値があります。

バグ報告のガイドライン:

  • 問題の検索をチェックして、すでに報告されているかどうかを確認します
  • 問題を単純なテストケースに切り分ける
  • 次のような Web サイトにバグのデモンストレーションを含めてください。JS ビン (新しいウィンドウが開きます)、JSフィドル (新しいウィンドウが開きます)、 またコードペン (新しいウィンドウが開きます)。 (レンプレート (新しいウィンドウが開きます)）。バグを報告する場合master、次の方法で最新のコードを参照できます。https://www.chartjs.org/dist/master/chart.umd.js (新しいウィンドウが開きます)(必要に応じて、必要なファイルを指すようにファイル名を変更します)。これらのファイルはいつ削除される可能性があるため、運用目的でこれらのファイルに依存しないでください。

バグがブラウザまたは画面密度に固有のものである場合、または特定の構成またはデータでのみ発生する場合は、バグに関連する追加の詳細を提供してください。

最終更新： 2023 年 5 月 25 日、午後 1 時 12 分 28 秒

←新しいチャート プラグイン→