chart.js 2.0の紹介-jsチュートリアル-php.cn

chart.js 2.0の紹介

Lisa Kudrow

リリース： 2025-02-17 10:47:09

オリジナル

983 人が閲覧しました

An Introduction to Chart.js 2.0

この記事は、現代のjavascript anthologyの一部です。 Modern JavaScriptの包括的なガイドについては、SitePoint Premiumを探索してコピーをダウンロードしてください。

ティム・セヴェリーンとサイモン・コドリントンがレビューしたピア。すべてのSitePointのピアレビュアーに感謝します！データが多いWebサイトでは、効果的なデータの視覚化が必要です。生の数字は人間が把握するのが難しいです。チャートとグラフは、英語以外のスピーカーであっても、直感的でアクセス可能な代替品を提供します。明確なビジュアルは、理解とウェブサイトの魅力を高めます。このチュートリアルでは、JavaScriptチャートライブラリであるChart.jsを紹介します。 6つの例を通して、その使用と構成を実証します

chart.js 2.0の重要な機能：

多様なチャート作成のための汎用性とユーザーフレンドリーなJavaScriptライブラリ。

単純なインストールとクイック学習曲線。

ライン、バー、レーダー、極地、パイ、ドーナツのさまざまなチャートタイプをサポートしています。チャートタイプは、

機能の拡張機能：モバイル応答性と統合タイトル。
カスタマイズ可能なインタラクティブ性（例えば、凡例のクリックによるデータセットの切り替え）。
外観の広範なカスタマイズオプション（色、ツールチップ、アニメーション）。type
なぜchart.js？
Chart.jsは、使いやすさと強力なカスタマイズのバランスを取ります。十分な柔軟性を提供しながら、より複雑なライブラリの急な学習曲線を回避します。その8つのチャートタイプは、ほとんどの視覚化のニーズをカバーしています。アクティブなオープンソースコミュニティは、高品質のメンテナンスを保証します。バージョン2.0では、重要な構文の改善とモバイルサポートを導入しました。このチュートリアルでは、chart.js 2.0を使用しています。 1.0から2.0の移行に関するセクションが含まれています。

chart.jsのインストール：

chart.jsはシンプルさを優先します。最も簡単なインストール方法は、cdn：

を介してです

要素：

も必要です代わりに、パッケージマネージャーを使用します（詳細については、入門ガイドを参照してください）。

chart.jsの機能を調べてみましょう

行チャート：

<🎜>

ログイン後にコピー

<canvas>この最小行チャートは、chart.jsのコア構造を示しています：

<canvas id="myChart"></canvas>

ログイン後にコピー

codepenの例

を参照してください

説明：

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
    datasets: [{
      label: 'apples',
      data: [12, 19, 3, 17, 6, 3, 7],
      backgroundColor: "rgba(153,255,51,0.4)"
    }, {
      label: 'oranges',
      data: [2, 29, 5, 5, 2, 3, 10],
      backgroundColor: "rgba(255,153,0,0.4)"
    }]
  }
});

ログイン後にコピー

：2Dレンダリングコンテキストを

。を取得します

：チャートオブジェクトを作成します。

チャートタイプを指定します。 チャートデータを保持します。アレイインデックスはグラフの位置を決定します

Legendsをクリックすると、データセットが切り替えられます。これは、すべてのチャートタイプに適用されます ctx<canvas>barチャート：
前の例では、
を単純に変更します。type: 'line' type: 'bar'
codepenの例
を参照してください
レーダーチャート：
変更
から
。重複したデータを使用して読みやすくするために、typeおよび'radar'を調整します。 backgroundColorborderColorcodepenの例
を参照してください極チャート：
変更から
。極チャートは単一のデータセットを視覚化します
typecodepenの例'polarArea'
を参照してください
パイとドーナツチャート：

変更からまたは
に変更します。ドーナツチャートは
を使用して穴のサイズを制御します type'pie'codepenの例（pie）'doughnut'を参照してください cutoutPercentage CodePenの例（ドーナツ）<
chart.js configuration（）：
プロパティは、広範なカスタマイズを許可します：
optionsタイトル：

options
：
- 積み重ねられたバーチャート：options: { title: { display: true, text: 'My Chart' } }積み重ねられたバーを使用します。
- cutoutPercentageイベント処理：
- 凡例をカスタマイズしますクリック動作： options: { scales: { yAxes: [{ stacked: true }] } }
Codepenの例を参照してくださいこの例は、凡例のクリックに基づいてキャプションを更新します。
chart.js 2.0 vs. 1.0：
```
<🎜>
```
ログイン後にコピー
ログイン後にコピー
重要な違い：

チャート宣言： 2.0は、
、
、およびを使用して単一の呼び出しを使用します。 1.0は関数チェーンを使用します。

モバイルサポート：
- 統合されたタイトル：2.0は、組み込みのタイトルを提供しています new Chart() typedata結論：options
- chart.jsは、迅速なチャートプロトタイピングに最適です。その多様なチャートの種類と使いやすさにより、あらゆるWeb開発者にとって貴重なツールになります。包括的な詳細については、公式Chart.jsドキュメントを参照してください（注：各チャートタイプの実際のCodepenリンクに
以上がchart.js 2.0の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。