マニュアル キャンセル

ColdFusion での円グラフの作成

 

円グラフは、データを円形の形式で表し、全体の比率を示すグラフのタイプです。円グラフの各スライスは全体の一部を表しているので、様々なカテゴリの相対的なサイズを簡単に確認できます。円グラフ内のすべてのデータの合計は 360 度に等しく、円グラフの合計値は常に 100%になります

ColdFusion で cfchart タグを使用して円グラフを作成するには、cfchartseries 内にグラフデータを設定し、グラフタイプを「円」に指定する必要があります。

{{
}} タグのデータを含む cfchart タグを使用して基本的な円グラフを作成する例を次に示します。{1}

<cfchart format=&quot;png&quot; chartWidth=&quot;600&quot; chartHeight=&quot;400&quot; pieSliceStyle=&quot;sliced&quot;>
<cfchartseries type=&quot;pie&quot; serieslabel=&quot;Web サイトトラフィック 2016&quot;>
<cfchartdata item=&quot;1 月&quot; value=&quot;#randRange(500000,1000000)#&quot;>
<cfchartdata item=&quot;2 月&quot; value=&quot;#randRange(500000,1000000)#&quot;>
<cfchartdata item=&quot;3 月&quot; value=&quot;#randRange(500000,1000000)#&quot;>
<cfchartdata item=&quot;4 月&quot; value=&quot;#randRange(500000,1000000)#&quot;>
<cfchartdata item=&quot;5 月&quot; value=&quot;#randRange(500000,1000000)#&quot;>
<cfchartdata item=&quot;6 月&quot; value=&quot;#randRange(500000,1000000)#&quot;>
</cfchartseries>
</cfchart>
<cfchart format=&quot;png&quot; chartWidth=&quot;600&quot; chartHeight=&quot;400&quot; pieSliceStyle=&quot;sliced&quot;> <cfchartseries type=&quot;pie&quot; serieslabel=&quot;Web サイトトラフィック 2016&quot;> <cfchartdata item=&quot;1 月&quot; value=&quot;#randRange(500000,1000000)#&quot;> <cfchartdata item=&quot;2 月&quot; value=&quot;#randRange(500000,1000000)#&quot;> <cfchartdata item=&quot;3 月&quot; value=&quot;#randRange(500000,1000000)#&quot;> <cfchartdata item=&quot;4 月&quot; value=&quot;#randRange(500000,1000000)#&quot;> <cfchartdata item=&quot;5 月&quot; value=&quot;#randRange(500000,1000000)#&quot;> <cfchartdata item=&quot;6 月&quot; value=&quot;#randRange(500000,1000000)#&quot;> </cfchartseries> </cfchart>
<cfchart format=&quot;png&quot; chartWidth=&quot;600&quot; chartHeight=&quot;400&quot; pieSliceStyle=&quot;sliced&quot;>
    <cfchartseries type=&quot;pie&quot; serieslabel=&quot;Web サイトトラフィック 2016&quot;>
        <cfchartdata item=&quot;1 月&quot; value=&quot;#randRange(500000,1000000)#&quot;>
        <cfchartdata item=&quot;2 月&quot; value=&quot;#randRange(500000,1000000)#&quot;>
        <cfchartdata item=&quot;3 月&quot; value=&quot;#randRange(500000,1000000)#&quot;>
        <cfchartdata item=&quot;4 月&quot; value=&quot;#randRange(500000,1000000)#&quot;>
        <cfchartdata item=&quot;5 月&quot; value=&quot;#randRange(500000,1000000)#&quot;>
        <cfchartdata item=&quot;6 月&quot; value=&quot;#randRange(500000,1000000)#&quot;>
    </cfchartseries>
</cfchart>

このスニペットの内容:

  • グラフのデータは、cfchartseries タグから取得されます。cfchartseries タグ内では、円グラフの各スライスのデータは cfchartdataitem タグによって提供されます。タグ内の各項目は月を表し、500K から 1M の間のランダムな数字です。
  • 出力は、サイズが 600x400 の png です。

次のように cfchartdata 内にハードコーディングした値を使用して円グラフを作成できます。

<cfchart format=&quot;png&quot; chartWidth=&quot;600&quot; chartHeight=&quot;400&quot; pieSliceStyle=&quot;sliced&quot;>
<cfchartseries type=&quot;pie&quot; serieslabel=&quot;Web サイトトラフィック 2016&quot;>
<cfchartdata item=&quot;1 月&quot; value=&quot;#randRange(500000,1000000)#&quot;>
<cfchartdata item=&quot;2 月&quot; value=&quot;#randRange(500000,1000000)#&quot;>
<cfchartdata item=&quot;3 月&quot; value=&quot;#randRange(500000,1000000)#&quot;>
<cfchartdata item=&quot;4 月&quot; value=&quot;#randRange(500000,1000000)#&quot;>
<cfchartdata item=&quot;5 月&quot; value=&quot;#randRange(500000,1000000)#&quot;>
<cfchartdata item=&quot;6 月&quot; value=&quot;#randRange(500000,1000000)#&quot;>
</cfchartseries>
</cfchart>
<cfchart format=&quot;png&quot; chartWidth=&quot;600&quot; chartHeight=&quot;400&quot; pieSliceStyle=&quot;sliced&quot;> <cfchartseries type=&quot;pie&quot; serieslabel=&quot;Web サイトトラフィック 2016&quot;> <cfchartdata item=&quot;1 月&quot; value=&quot;#randRange(500000,1000000)#&quot;> <cfchartdata item=&quot;2 月&quot; value=&quot;#randRange(500000,1000000)#&quot;> <cfchartdata item=&quot;3 月&quot; value=&quot;#randRange(500000,1000000)#&quot;> <cfchartdata item=&quot;4 月&quot; value=&quot;#randRange(500000,1000000)#&quot;> <cfchartdata item=&quot;5 月&quot; value=&quot;#randRange(500000,1000000)#&quot;> <cfchartdata item=&quot;6 月&quot; value=&quot;#randRange(500000,1000000)#&quot;> </cfchartseries> </cfchart>
<cfchart format=&quot;png&quot; chartWidth=&quot;600&quot; chartHeight=&quot;400&quot; pieSliceStyle=&quot;sliced&quot;>
    <cfchartseries type=&quot;pie&quot; serieslabel=&quot;Web サイトトラフィック 2016&quot;>
        <cfchartdata item=&quot;1 月&quot; value=&quot;#randRange(500000,1000000)#&quot;>
        <cfchartdata item=&quot;2 月&quot; value=&quot;#randRange(500000,1000000)#&quot;>
        <cfchartdata item=&quot;3 月&quot; value=&quot;#randRange(500000,1000000)#&quot;>
        <cfchartdata item=&quot;4 月&quot; value=&quot;#randRange(500000,1000000)#&quot;>
        <cfchartdata item=&quot;5 月&quot; value=&quot;#randRange(500000,1000000)#&quot;>
        <cfchartdata item=&quot;6 月&quot; value=&quot;#randRange(500000,1000000)#&quot;>
    </cfchartseries>
</cfchart>

出力

円グラフ
円グラフ

データベースのデータを使用した円グラフの作成

データベースからデータをインポートし、値列に基づいて円グラフを作成することもできます。

<cfquery name=&quot;qEmployee&quot; datasource=&quot;cfdocexamples&quot; maxRows=&quot;6&quot;> SELECT FirstName, LastName, Salary FROM EMPLOYEE </cfquery> <cfchart format=&quot;html&quot; pieslicestyle=&quot;solid&quot; chartWidth=&quot;600&quot; chartHeight=&quot;400&quot;> <cfchartseries query=&quot;qEmployee&quot; type=&quot;pie&quot; serieslabel=&quot;Salary Details 2016&quot; valuecolumn=&quot;Salary&quot; itemcolumn=&quot;FirstName&quot;> </cfchartseries> </cfchart>
<cfquery name=&quot;qEmployee&quot; datasource=&quot;cfdocexamples&quot; maxRows=&quot;6&quot;> SELECT FirstName, LastName, Salary FROM EMPLOYEE </cfquery> <cfchart format=&quot;html&quot; pieslicestyle=&quot;solid&quot; chartWidth=&quot;600&quot; chartHeight=&quot;400&quot;> <cfchartseries query=&quot;qEmployee&quot; type=&quot;pie&quot; serieslabel=&quot;Salary Details 2016&quot; valuecolumn=&quot;Salary&quot; itemcolumn=&quot;FirstName&quot;> </cfchartseries> </cfchart>
<cfquery name=&quot;qEmployee&quot; datasource=&quot;cfdocexamples&quot; maxRows=&quot;6&quot;> SELECT FirstName, LastName, Salary FROM EMPLOYEE </cfquery> <cfchart format=&quot;html&quot; pieslicestyle=&quot;solid&quot; chartWidth=&quot;600&quot; chartHeight=&quot;400&quot;> <cfchartseries query=&quot;qEmployee&quot; type=&quot;pie&quot; serieslabel=&quot;Salary Details 2016&quot; valuecolumn=&quot;Salary&quot; itemcolumn=&quot;FirstName&quot;> </cfchartseries> </cfchart>

出力

データベースからの円グラフ
データベースからの円グラフ

ヘルプをすばやく簡単に入手

新規ユーザーの場合