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レンダリングコンテキストを

。を取得します

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

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

Pro Tip：
• 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

  ：
  ドーナツチャートの穴のサイズ（0-50）を制御します。
  • 積み重ねられたバーチャート：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には、ネイティブモバイルサポートが含まれています
  • 統合されたタイトル：2.0は、組み込みのタイトルを提供しています new Chart() typedata結論：options
  • chart.jsは、迅速なチャートプロトタイピングに最適です。その多様なチャートの種類と使いやすさにより、あらゆるWeb開発者にとって貴重なツールになります。 包括的な詳細については、公式Chart.jsドキュメントを参照してください （注：各チャートタイプの実際のCodepenリンクに
  を置き換えます。）

  以上がchart.js 2.0の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。