ツール

一目で

ゆったり密度

濃いマスほど、このテーマでその指標が高いことを示します。

明瞭85

説得60

密度48

制作コスト28

課題適合86

仕事適合88

低高

Chart.js クイック チャートは小さな構成オブジェクトからキャンバスに描画されたマークとして値を載せます。Chart.js が Web のデフォルトの MIT スターター チャートになりました。

業務報告・広告・課題では「内部ツール、学生の Web プロジェクト、軽量のマーケティング ページ」に向く。「マップ、サンキー、または出版グレードのベクトルのエクスポートのみが必要です」のときは別の形を選ぶ。

ソフト

• Chart.js — シンプルで文書化されたチャート - MIT ライセンスを取得しています。 · MIT · github.com/chartjs/Chart.js
• datalabels plugin — 凡例だけでは不十分な場合は、バーに数字を入れます。 · MIT · github.com/chartjs/chartjs-plugin-datalabels
• Awesome Chart.js — コミュニティによって管理されている厳選されたプラグインとアダプター。 · MIT · github.com/chartjs/awesome
• ECharts (step up) — Chart.js が小さすぎると感じた場合は、ここで卒業してください。 · Apache-2.0 · github.com/apache/echarts
• Line demo SVG — 印刷リーダーおよび JS を使用しないリーダー用のサーバー SVG 折れ線グラフ。 · CC0 examples · github.com/Tool-Lifes/viz-atlas

書き出し

• 書き出し 1 — SVG
• 書き出し 2 — PDF
• 書き出し 3 — スライドへ EMF/SVG（スクリーンショット禁止）
• 書き出し 4 — ウェブはSVG、印刷はPDF

アクセシビリティ

• アクセシビリティ 1 — 色だけに意味を持たせない。パターン・ラベル・位置を重ねる。
• アクセシビリティ 2 — 本文は 4.5:1、大きなマークは 3:1。
• アクセシビリティ 3 — チャートに短い代替テキスト。数値はHTML表でも。
• アクセシビリティ 4 — 動きは強調のときだけ。prefers-reduced-motion を尊重。

Chart.js クイック チャート: 小さな構成オブジェクトからキャンバスに描画されたマークを守り、「マップ、サンキー、または出版グレードのベクトルのエクスポートのみが必要です」のときは別の図を選ぶ。

← スタジオ Chart.js クイック チャート