cfchart の概要

<!--- この構文では、JSON ファイルを使用してチャートのスタイルを指定します。--->
<cfchart
format=“html”
style = “JSON filename”>
</cfchart>

<!--- この構文では、cfchart タグの属性を使用してチャートのスタイルを指定します。--->  
<cfchart  
alpha = “value between 0 and 1”  
arrows = “JSON string representation”  
aspect3D = “JSON string representation”  
background = “JSON string representation”  
base64=“true | false” 
bevel = “JSON string representation”  
border = “JSON string representation”  
backgroundColor = “hexadecimal value|web color”  
chartHeight = “integer number of pixels”  
chartWidth = “integer number of pixels”  
crosshair = “JSON string representation”  
dataBackgroundColor = “hexadecimal value|web color” 
fill = “JSON string representation”  
font = “font name”  
fontBold = “yes|no”  
fontItalic = “yes|no”  
fontSize = “font size”  
foregroundColor = “hexadecimal value|web color”  
format = “jpg|png|html|svg”  
gridlines = “integer number of lines”  
height = “height in pixels” 
width = “width in pixels” 
ID = “chart identifier”  
labels = “JSON string representation”  
legend = “JSON string representation”  
labelFormat = “number|currency|percent|date”  
markers = “JSON string representation”  
markerSize = “integer number of pixels”  
name = “string”  
options=“struct”
pieSliceStyle = “solid|sliced”  
plot = “JSON string representation”  
plotarea = “JSON string representation”  
preview = “JSON string representation”  
refresh = “canvas|flash|svg|vml”  
renderer = “canvas|flash|svg|vml”  
scales = “comma-seperated list of axes”  
scaleR=“scales for pie and gauge charts”
scaleFrom = “integer minimum value”  
scaleTo = “integer maximum value”  
seriesPlacement = “default|cluster| stacked|percent”  
show3D = “yes|no”  
showBorder = “yes|no”  
showLegend = “yes|no”  
showMarkers = “yes|no” 
showScaleMarkers=“yes|no”
showXGridlines = “yes|no”  
showYGridlines = “yes|no”  
sortXAxis = “yes|no”  
tipBGColor = “hexadecimal value|web color”  
title = “title of chart”  
tooltip = “JSON string representation”  
theme=“default or custom theme”
url = “onClick destination page”  
x=“x coordinate”
xAxis = “JSON string representation”  
xAxis2 = “JSON string representation”  
xAxisTitle = “title text”  
xAxisType = “scale|category”  
xAxisValues = “Array of values”  
xOffset = “number between -1 and 1”  
y=“y coordinate”
yAxis = “JSON string representation”  
yAxis2 = “JSON string representation”  
yAxisTitle = “title text”  
yAxisType = “scale|category”  
yAxisValues = “Array of values”  
yOffset = “number between -1 and 1” 
zoom = “JSON string representation”  
</cfchart>

<cfset chartData = [10, 20, 30, 40, 50]> <!--- データの例--->  

<cfchart format=“html” xaxistitle=“カテゴリ” yaxistitle=“値” title=“棒グラフの例” type=“bar” showlegend=“false”> 
    <cfchartseries type=“bar”> 
        <cfchartdata item=“カテゴリ 1” value=“#chartData[1]#”> 
        <cfchartdata item=“カテゴリ 2” value=“#chartData[2]#”> 
        <cfchartdata item=“カテゴリ 3” value=“#chartData[3]#”> 
        <cfchartdata item=“カテゴリ 4” value=“#chartData[4]#”> 
        <cfchartdata item=“カテゴリ 5” value=“#chartData[5]#”> 
    </cfchartseries> 
</cfchart>

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

<cfchart  
    format=“png|jpg|html|svg” 
    chartWidth=“width” 
    chartHeight=“height” 
    title=“チャートタイトル” 
    type=“chart_type”> 

    <!-- 系列データを定義します --> 
    <cfchartseries  
        type=“series_type” 
        query=“query_name” 
        itemcolumn=“column_name” 
        valuecolumn=“column_name”> 
    </cfchartseries> 
    
<!-- ここで他の系列または追加のチャートのカスタマイズを定義します --> 
 </cfchart>

<cfchart format=“html” chartheight=“300” chartwidth=“400” title=“月間売上高” type=“area”> 
    <cfchartseries type=“area”> 
        <cfchartdata item=“1 月” value=“150” /> 
        <cfchartdata item=“2 月” value=“200” /> 
        <cfchartdata item=“3 月” value=“180” /> 
        <cfchartdata item=“4 月” value=“250” /> 
        <cfchartdata item=“5 月” value=“300” /> 
    </cfchartseries>
</cfchart>

<cfquery name=“getSalesData” datasource=“art”> 
    select * from orders 
    order by orderdate 
</cfquery> 

<cfchart format=“html” chartheight=“400” chartwidth=“600” title=“Sales Over Time”> 
    <cfchartseries type=“curve” query=“getSalesData” itemColumn=“orderdate” valueColumn=“tax”/> 
</cfchart> 

{
 “graphset” : [ { “type” : “bar”, “title” : { “font-size” : 18, “color” : “#FF0000”, “bold” : true, “font-family” : “Verdana”, “background-color” : “#cccccc”, “border-color” : “#cccccc”, “border-width” : 1
   }
  }
 ]
}

<cfchart format=“html” type=“bar” showlegend=“false” chartHeight=“400” chartWidth=“600” style=“my_custom_style.json” title=“Sales report”> <cfchartseries> <cfchartdata item=“2012” value=#randrange(10,100)#> <cfchartdata item=“2013” value=#randrange(10,100)#> <cfchartdata item=“2014” value=#randrange(10,100)#> <cfchartdata item=“2015” value=#randrange(10,100)#> <cfchartdata item=“2016” value=#randrange(10,100)#> <cfchartdata item=“2017” value=#randrange(10,100)#> </cfchartseries> </cfchart>