chart.js：パイ、ドーナツ、バブルチャートを始めます

このチュートリアルでは、chart.jsを使用してパイ、リング、およびバブルチャートを作成する方法について説明します。以前は、4つのチャートタイプのchart.js：ラインチャートとバーチャート（チュートリアル2）、およびレーダーチャートと極地域チャート（チュートリアル3）を学びました。

パイとリングチャートを作成します

パイチャートとリングチャートは、さまざまな部分に分かれている全体の割合を示すのに理想的です。たとえば、パイチャートを使用して、サファリの男性ライオン、女性ライオン、若いライオンの割合、または異なる候補者が選挙で受け取る票の割合を示すことができます。

パイチャートは、単一のパラメーターまたはデータセットの比較にのみ適しています。パイチャートのファンの角度はデータポイントの数値サイズに依存するため、パイチャートは値のあるエンティティをゼロ値で描画できないことに注意してください。これは、ゼロの割合のエンティティがチャートに表示されないことを意味します。同様に、パイチャートに負の値を描くことはできません。

chart.jsでは、 typeキーをpieに設定してパイチャートを作成し、 doughnutにtypeキーを設定してリングチャートを作成できます。両方のチャートを作成する例は次のとおりです。

 var piechart = new Chart（votescanvas、{
    タイプ：「パイ」、
    データ：投票者、
    オプション：Chartoptions
}）;

var doughnutchart = new Chart（Votescanvas、{
    タイプ：「ドーナツ」、
    データ：投票者、
    オプション：Chartoptions
}）;

2015年のトップ5の石油輸出業者の石油輸出データ（ユニット：10億米ドル）を示すパイチャートを作成しましょう。

 var data = {
    ラベル：[
        "サウジアラビア"、
        "ロシア"、
        "イラク"、
        「uae」、
        "カナダ"
    ]、、
    データセット：[
        {
            データ：[133.3、86.2、52.2、51.2、50.2]、
            BackgroundColor：[
                "＃ff6384"、
                「＃63ff84」、
                「＃84ff63」、
                「＃8463ff」、
                「＃6384ff」
            ]
        }]
}; 

さまざまなキーを使用して、数字や文字列である可能性のあるcutoutなど、上記のチャートの表示を制御できます。数値として指定されている場合、値は％で終了する文字列として指定されている場合、値は総半径の割合と見なされます。 rotationキーを使用して、チャートの開始角を指定できます。同様に、 circumferenceキーを使用して、データをプロットするときにチャートがスキャンする角度を指定することもできます。両方の角度は、ラジアンではなく程度で表されます。

チャートを描画するときに2つの異なるアニメーションをアクティブにすることができます。 animateRotateキーを使用して、チャートに回転アニメーションが必要かどうかを指定できます。同様に、 animateScaleキーを使用して、リンググラフを中央から拡張するかどうかを指定することもできます。 animateRotateの価値はデフォルトでtrueであり、 animateScaleの値はデフォルトでfalseです。

いつものように、 backgroundColor 、 borderColor 、 borderWidthキーを使用して、それぞれすべてのデータポイントの背景色、境界色、境界幅を制御できます。同様に、これらすべてのプロパティのホバー値はhoverBackgroundColor 、 hoverBorderColor 、およびhoverBorderWidthキーを使用して制御できます。

以下は、上記のデータのリンググラフを作成するコードです。 rotation値を-90に設定して、起動点を設定して、反時計回りに90度回転します。

 var oildata = {
  ラベル：[「サウジアラビア」、「ロシア」、「イラク」、「UAE」、「カナダ」]、
  データセット：[
    {
      データ：[133.3、86.2、52.2、51.2、50.2]、
      BackgroundColor：["＃ff6384"、 "＃63ff84"、 "＃84ff63"、 "＃8463ff"、 "＃6384ff"]、
      bordercolor：「黒」、
      境界幅：2
    }
  ]
};

var chartoptions = {
  回転：-90、
  カットアウト：「45％」、
  プラグイン：{
    タイトル： {
      ディスプレイ：本当、
      位置：「ボトム」、
      テキスト：「2015年の主要な石油輸出業者」、
      フォント：{
        サイズ：32
      }
    }、
    伝説： {
      ポジション：「左」、
      整列：「開始」
    }
  }、
  アニメーション：{
    アニメーターテート：虚偽、
    AnimateScale：true
  }
};

var donutchart = new Chart（oilcanvas、{
  タイプ：「ドーナツ」、
  データ：oildata、
  オプション：Chartoptions
}）; 

バブルチャートを作成します

バブルチャートは、チャートにデータの3つの寸法を描画または表示するために使用されます（ P1 、 P2 、 P3 ）。バブルの位置とサイズは、これら3つのデータポイントの値を決定します。水平軸は最初のデータポイント（P1）を表し、垂直軸は2番目のデータポイント（ P2 ）を表し、バブルの面積は3番目のデータポイント（ P3 ）の値を表すために使用されます。

3番目のデータポイントのサイズは、泡の半径ではなく、その領域で表されることに注意する必要があります。円の面積は、半径の正方形に比例します。これは、描画しているバブル半径が、3番目のデータポイントのサイズの平方根に比例することを確認する必要があることを意味します。

chart.jsでは、 typeキーの値をbubbleに設定することにより、バブルチャートを作成できます。バブルチャートを作成する方法の例は次のとおりです。

 var bubblechart = new Chart（popcanvas、{
    タイプ：「バブル」、
    データ：Popdata、
    オプション：Chartoptions
}）;

バブルチャートを使用して、部屋のさまざまなアイテムの重量を描きましょう。チャートのデータは、オブジェクト形式で渡す必要があります。データオブジェクトは、正しく描画するために次のインターフェイスを持つ必要があります。

 {
    X：<number> 、
    Y：<number> 、
    R：<number>
}</number></number></number>

バブルチャートと他のすべてのチャートの重要な違いは、バブル半径がチャートで拡張しないことです。

たとえば、バーチャート内のバーの幅は、チャートのサイズに応じて増加または減少します。これはバブルチャートでは発生しません。バブルの半径は、指定するピクセルの正確な数に常に等しくなります。これは理にかなっています。なぜなら、このチャートタイプでは、半径は実際に実際のデータを表すために使用されるためです。

バブルチャートを作成して、森のさまざまな場所で鹿の群れの数をプロットしましょう。

 var popdata = {
  データセット：[
    {
      ラベル：[「鹿の群れ」]、
      データ： [
        {x：100、y：0、r：10}、
        {x：60、y：30、r：20}、
        {x：40、y：60、r：25}、
        {x：80、y：80、r：30}、
        {x：20、y：30、r：25}、
        {x：0、y：100、r：5}
      ]、、
      BackgroundColor： "＃ff9966"
    }
  ]
};

ここの半径は実際の数の平方根に比例するため、（80、80）の鹿の数は（0、100）の鹿の数の36倍です。

他のすべてのチャートタイプと同様に、 backgroundColor 、 borderColor 、 borderWidthキーを使用して、描画ポイントの背景色、境界色、境界幅を制御できます。同様に、 hoverBackgroundColor 、 hoverBorderColor 、およびhoverBorderWidthキーを使用して、ホバーバックグラウンドの色、ホバー境界色、およびホバー境界幅を指定することもできます。

また、 hoverRadiusキーを使用して、余分な半径を指定して、ホバリング時に異なる泡に追加することもできます。この半径は元の値に追加されて、ホバリングバブルを描くことを忘れないでください。元のバブルの半径が10で、 hoverRadius 5に設定されている場合、ホバーのバブルの半径は15に等しくなります。

 var popdata = {
  データセット：[
    {
      ラベル：[「鹿の群れ」]、
      データ： [
        {x：100、y：0、r：10}、
        {x：60、y：30、r：20}、
        {x：40、y：60、r：25}
      ]、、
      BackgroundColor： "＃9966ff"、
      HoverbackgroundColor： "#fffff"、
      Hoverbordercolor： "＃9966ff"、
      HoverborderWidth：5、
      Hoverradius：5
    }、
    {
      ラベル：["Giraffe Number"]、
      データ： [
        {x：80、y：80、r：30}、
        {x：20、y：30、r：25}、
        {x：0、y：100、r：5}
      ]、、
      BackgroundColor： "＃ff6600"、
      HoverbackgroundColor： "#fffff"、
      Hoverbordercolor： "＃ff6600"
      HoverborderWidth：5、
      Hoverradius：5
    }
  ]
};

var chartoptions = {
  プラグイン：{
    タイトル： {
      ディスプレイ：本当、
      位置：「ボトム」、
      テキスト：「さまざまなホットスポットにある動物の数」、
      フォント：{
        サイズ：20
      }
    }、
    伝説： {
      位置：「ボトム」、
      アライメント：「センター」
    }
  }、
  レイアウト：{
    パディング：20
  }
};

上記のパラメーターは、次のバブルチャートを作成します。

要約します

このチュートリアルでは、chart.jsで利用できる他の3つのチャートタイプを学びました。これで、適切なチャートタイプを選択してデータをプロットし、異なるキーの特定の値を設定して外観を制御できるようにする必要があります。次のチュートリアルでは、さまざまなチャートタイプのスケールを操作する方法を学びます。

以上がchart.js：パイ、ドーナツ、バブルチャートを始めますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。