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

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

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

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

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

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

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

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

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

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

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

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

以下は、上記のデータのリンググラフを作成するコードです。 rotation値を-90に設(shè)定して、起動點を設(shè)定して、反時計回りに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％」、
  プラグイン：{
    タイトル： {
      ディスプレイ：本當(dāng)、
      位置：「ボトム」、
      テキスト：「2015年の主要な石油輸出業(yè)者」、
      フォント：{
        サイズ：32
      }
    }、
    伝説： {
      ポジション：「左」、
      整列：「開始」
    }
  }、
  アニメーション：{
    アニメーターテート：虛偽、
    AnimateScale：true
  }
};

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

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

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

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

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

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

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

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

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

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

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

 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"
    }
  ]
};

ここの半徑は実際の數(shù)の平方根に比例するため、（80、80）の鹿の數(shù)は（0、100）の鹿の數(shù)の36倍です。

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

また、 hoverRadiusキーを使用して、余分な半徑を指定して、ホバリング時に異なる泡に追加することもできます。この半徑は元の値に追加されて、ホバリングバブルを描くことを忘れないでください。元のバブルの半徑が10で、 hoverRadius 5に設(shè)定されている場合、ホバーのバブルの半徑は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 = {
  プラグイン：{
    タイトル： {
      ディスプレイ：本當(dāng)、
      位置：「ボトム」、
      テキスト：「さまざまなホットスポットにある動物の數(shù)」、
      フォント：{
        サイズ：20
      }
    }、
    伝説： {
      位置：「ボトム」、
      アライメント：「センター」
    }
  }、
  レイアウト：{
    パディング：20
  }
};

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

要約します

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

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