FusionChart
요약 | FusionChart는 다양한 Device, Browser, Platform에서 작동하는 JavaScript기반 차트입니다. WebSquare5는 FusionChart 기능을 사용할 수 있는 환경을 제공합니다. |
|---|---|
지원 브라우저 | 거의 모든 브라우저를 지원합니다. 단, flash 렌더링 시 flash를 지원하지 않는 브라우저는 지원하지 않습니다.
|
차트 종류 |
|
지원 데이터 |
|
YouTube 동영상 |
|
FusionChart
버전
2023년 5월 이후 릴리즈되는 엔진은 아래와 같이 3.15 및 3.19 두 개의 버전만 지원합니다.
externalJS/FusionCharts3.15.2/FusionCharts_all.js
externalJS/FusionCharts3.19/FusionCharts_all.js
그리기
FusionChart에 id, chartType, drawType을 설정하여 차트를 만듭니다.
<w2:fusionchart id="chartTest" style="position: absolute ;left: 480px;top: 150px; width:430px; height: 300px;" chartType="Column2D" drawType="javascript"></w2:fusionchart>
아래와 같이
setJSONData()API를 이용하여 차트 데이터를 설정하십시오. (FusionChart는 xml과 json 데이터를 지원하며, WebSquare5는 json 데이터를 지원하기 때문.)
$r_title(사용 예)
var jsonData = {
"data": [{
"value": "490000",
"label": "China"
},
{
"value": "340000",
"label": "USA"
},
{
"value": "160000",
"label": "Brazil"
},
{
"value": "220000",
"label": "Spain"
},
{
"value": "123000",
"label": "India"
}
]
};
//차트에 데이터를 셋팅합니다.
chartTest.setJSONData(jsonData);아래와 같이 차트가 그려지는지 확인합니다. (WebSquare5 기본 스타일 적용된 상태)
FusionChart
차트 Customizing
FusionChart는 기본적으로 데이터와 스타일 옵션들이 결합되어 있는 형태입니다.
차트에 거의 모든 부분을 접근하여 스타일을 변경할 수 있습니다. (JavaScript 랜더링시 지원하지 않는 부분도 있음.)
차트 종류는 44가지이며 차트마다 옵션과 API가 조금씩 다릅니다.
FusionChart 공식 홈페이지 documents에 각각의 차트마다 specification sheet에서 옵션과 API를 확인하실 수 있습니다.
- 관련 API
configure(): chart에 표시되는 메세지를 변경합니다.
setChartAttribute(): chart element에 들어가는 Attribute를 설정합니다. (caption, yaxisname)setPlotColor(): chart에 Data Plot의 색상을 지정합니다.addTrendLine(): chart에 trendLine(가로줄)을 그립니다.addVTrendLine(): chart에 vtrendLine(세로줄)을 그립니다. (Scatter/Bubble/Zoom Line Chart에서만 지원)applyStyle(): chart에 Style을 지정합니다. (animation, font, glow, bevel)
다음은 위의 API를 사용하여 옵션을 설정한 예입니다.
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:w2="http://www.inswave.com/websquare" xmlns:xf="http://www.w3.org/2002/xforms">
<head>
<w2:buildDate />
<xf:model>
<xf:instance>
<data xmlns="" />
</xf:instance>
</xf:model>
<script type="javascript"><![CDATA[
var jsonData = {
"data": [
{
"value": "490000",
"label": "China"
},
{
"value": "340000",
"label": "USA"
},
{
"value": "160000",
"label": "Brazil"
},
{
"value": "220000",
"label": "Spain"
},
{
"value": "123000",
"label": "India"
}
]
};
// setJSONData API를 이용하여 데이터를 셋팅하기 이 전에 차트 옵션들을 셋팅해야 합니다
// 차트가 draw되기 전에 customizing 함수를 사용합니다.
// chart element에 들어갈 옵션 입니다.
var options = { caption : "전세계 판매량 요약",
subCaption : "2006년 동안",
yAxisName : " 금액 ",
xAxisName : " 나라 ",
numberPrefix:"$" };
chartTest.setChartAttribute(options);
// trendLine 옵션입니다.
var lineOptions = { startValue: "220000",
color: "00cc00",
displayValue: "평균" };
chartTest.addTrendLine(lineOptions);
// 스타일옵션입니다.
var styleOptions = { color : "2a5900",
size : "20",
bold : "1",
underline : "1"};
chartTest.applyStyle("font", "captionFont", styleOptions, ["Caption"]);
// 실제 데이터를 셋팅합니다. 차트가 그려집니다.
chartTest.setJSONData(jsonData);
]]></script>
</head>
<body>
<w2:fusionchart id="chartTest" style="position: absolute ;left: 480px;top: 150px; width:430px; height: 300px;" chartType="Column2D" drawType="javascript">
</w2:fusionchart>
</body>
</html>옵션이 적용된 차트
데이터 구조
FusionChart는 xml과 json을 지원합니다.
차트에 따라 데이터 구조가 single series , multi series 등이 존재합니다.
아래 데이터에 빨간색부분은 chart의 여러 속성을 지정할 수 있는 영역입니다.
예를 들어 차트에 Caption을 넣어 싶다면 아래를 추가 하십시오.
Caption : "test Caption"(json)
혹은
Caption="test Caption"
Chart 영역에 들어가는 여러 속성들은 차트마다 조금씩 다르며 FusionChart에서 제공하는 chart Specification sheet을 보고 원하시는 옵션을 setChartAttribute() API로 추가하십시오.
WebSquare5 서버에서 복잡한 구조의 차트 데이터를 만들어 내려주는 것은 효율적이지 않습니다. 따라서 아래와 같이 실제 차트에 보여질 데이터만 내려받아 차트 옵션과 색상 등을 API로 추가하여 화면으로 보여주는 방식을 권장합니다.
Single-series
$r_title(json 구조)
{
"chart": {},
"data": [{
"label": "Alex",
"value": "25000"
},
{
"label": "Mark",
"value": "35000"
},
{
"label": "David",
"value": "42300"
},
{
"label": "Graham",
"value": "35300"
}
]
}$r_title(xml 구조)
<chart >
<set label="Alex" value="25000" />
<set label="Mark" value="35000" />
<set label="David" value="42300" />
<set label="Graham" value="35300" />
</chart>Multi-series
$r_title(json 구조)
{
"chart": {},
"categories": [{
"category": [{
"label": "January"
},
{
"label": "February"
},
{
"label": "March"
}
]
}],
"dataset": [{
"seriesname": "Product A",
"data": [{
"value": "8343"
},
{
"value": "6983"
},
{
"value": "7658"
}
]
},
{
"seriesname": "Product B",
"data": [{
"value": "2446"
},
{
"value": "3935"
},
{
"value": "3452"
}
]
}
]
}$r_title(xml 구조)
<chart>
<categories>
<category label="January" />
<category label="February" />
<category label="March" />
</categories>
<dataset seriesname="Product A" >
<set value="8343" />
<set value="6983" />
<set value="7658" />
</dataset>
<dataset seriesname="Product B" >
<set value="2446" />
<set value="3935" />
<set value="3452" />
</dataset>
</chart>위의 두 가지 이외의 데이터 구조는 FusionCharts documents의 FusionCharts XT Data Formats 섹션을 확인하십시오.
데이터 바인딩
차트 Properties 이용
ref
FusionChart와 DataCollection 데이터 연동 시 사용. DataCollection을 설정.labelNode/seriesColumns옵션과 함께 사용.
labelNode
FusionChart의 label로 사용할 DataCollection의 column ID값.
공백 일 경우 DataCollection의 첫 번째 column을 사용.
FusionChart의 series 데이터로 사용할 DataCollection column. 공백일 경우 DataCollection의 첫 번째 column을 제외한dataType이 number인 column을 사용.seriesColumns은 각 series에 대한 column의 ID값이나 옵션을 설정한 객체일 수 있음.seriesColumns에 객체를 넣을 수 없는 차트: Single Series, Scatter, Zoom Lines
사용 예
Single Series Chart 일 경우: [['ProductA']]
Multi Series Charts 일 경우:
Multi Series Stacked Chart 일 경우 : Multi Series Charts 와 동일
MSStackedColumn2DLineDY 차트의 경우
(마지막 시리즈 배열은 LineDY로 인식):
[['ProductA','ProductB'], ['ServiceA','ServiceB','ServiceC'],[{'id':'Revenue','linethickness':'2'},{'id':'RevenueB','linethickness':'5'}]]
Scatter & Bubble Chart 일 경우(X, Y, Z의 column ID를 순서대로 설정): [['X','Y']]
Zoom Line Chart 일 경우: Multi Series Charts 와 동일
객체 설명
단순 string('ProductA')만 넣은 경우에는
{'id':'ProductA'}id가 생략된 모양{'id':'Year3','seriesname': ‘New Year', 'renderas':'Line', 'showValues':'1', 'parentyaxis':'S'}객체에 seriesname이 있을 경우 설정한 seriesname으로 세팅되고, seriesname이 없을 경우에는 dataList의 Year3 컬럼의 name 값으로 셋팅됩니다.{'id':'Year2','displayValue':'Month', 'showValues':'1'}Month 컬럼의 데이타들을 displayValue로 넣고 싶은 경우 사용 할 컬럼의 id로 설정 해 주시면 됩니다.
seriesColumns
setChartColumnRef() API 이용
setChartColumnRef() API를 이용하여 아래와 같이 동적으로 DataCollection을 바인딩할 수 있습니다.
chart1.setChartColumnRef('data:dataList2','Year',"[['ServiceC']]");
chart2.setChartColumnRef('data:dataList1','Month',"[['Year2','Year3','Year1']]");DataCollection의 getFusionChartData() API 이용
dataList의 getFusionChartData()를 호출하면 chartType에 따라 알맞은 차트 데이터가 반환 됩니다. 반환타입은 JSON 객체이며 FusionChart의 setJSONData() API로 해당 데이터를 설정하면 화면에 차트가 그려집니다.
getFusionChartData() API를 이용하는 경우 DataCollection과 직접 바인딩 된 것은 아니기 때문에 DataCollection의 데이타가 업데이트 되더라도 차트는 갱신되지 않습니다. 갱신을 원할 경우, 9.1/9.2를 이용해서 DataCollection과 직접 바인딩하십시오.
<script type="javascript"><![CDATA[
// 위에 정의된 xml를 읽어 datalist에 바인딩합니다.
dataList1.setXML(WebSquare.ModelUtil.findInstanceNode('vector'));
//dataList를 getFusionChartData() API를 사용하여 차트데이터로 변환합니다.
var chartObj = dataList1.getFusionChartData("column2d”, "Month", ”[["Price"]]”);
//변환된 데이터를 차트에 셋팅 합니다
chart1.setJSONData(chartObj);.
]]></script>DataCollection으로 모든 FusionChart 옵션을 지원하는데는 한계가 있기 때문에 , getFusionChartData() API로 반환받는 json 객체를 직접 핸들링하여 원하시는 옵션을 추가 할 수 있습니다.
var chartObj = dataList1.getFusionChartData("Column2D","Month","[['Price']]”);
var vlineObj = { "vline":"true","color":"FF5904","thickness":"2”};
chartObj.data.splice(2, 0, vlineObj); // vline을 추가합니다.
chart1.setJSONData(chartObj);차트 타입 변경
changeType() 함수를 사용하여 차트 타입을 변경할 수 있습니다.
$r_title(사용 예) fusionChart1.changeType(“line”); fusionChart1.changeType(“funnel”); fusionChart1.changeType(“pyramid”);
YouTube 동영상 (https://youtu.be/nyXDiCfCgc8)
예제
Single Series Chart
<model>
<xf:model> <w2:dataCollection> <w2:dataList id="dataList1" baseNode="vector" repeatNode="item" valueNode=""> <w2:columnInfo> <w2:column id="Month" name="Month" dataType="text"></w2:column> <w2:column id="Price" name="Price" dataType="number"></w2:column> </w2:columnInfo> </w2:dataList> </w2:dataCollection> <xf:instance> <data xmlns=""> <vector> <item> <Month>January</Month> <Price>17400</Price> </item> <item> <Month>February</Month> <Price>19800</Price> </item> <item> <Month>March</Month> <Price>21800</Price> </item> <item> <Month>April</Month> <Price>23800</Price> </item> <item> <Month>May</Month> <Price>29600</Price> </item> <item> <Month>June</Month> <Price>27600</Price> </item> <item> <Month>July</Month> <Price>31800</Price> </item> <item> <Month>August</Month> <Price>39700</Price> </item> <item> <Month>September</Month> <Price>37800</Price> </item> <item> <Month>October</Month> <Price>21900</Price> </item> <item> <Month>November</Month> <Price>32900</Price> </item> <item> <Month>December</Month> <Price>39800</Price> </item> </vector> </data> </xf:instance> </xf:model>
<script>
<script type="javascript"><![CDATA[
// dataCollection이 셋팅되면 자동으로 차트가 그려짐
dataList1.setXML(WebSquare.ModelUtil.findInstanceNode('vector'));
</script><body>
<w2:FusionChart id="chart1" style="height:280px;width:100%;" chartType="Column2D" drawType="javascript" ref="data:dataList1" seriesColumns="[['Price']]" labelNode="Month"></w2:FusionChart>
fusion4
Multi Series Charts / Combination Chart
<model>
<xf:model> <w2:dataCollection> <w2:dataList id="dataList2" baseNode="vector2" repeatNode="item" valueNode=""> <w2:columnInfo> <w2:column id="Month" name="Month" dataType="text"></w2:column> <w2:column id="Year1" name="2005" dataType="number"></w2:column> <w2:column id="Year2" name="2006" dataType="number"></w2:column> <w2:column id="Year3" name="2007" dataType="number"></w2:column> /w2:columnInfo> </w2:dataList> </w2:dataCollection> <xf:instance> <data xmlns=""> <vector2> <item> <Month>January</Month> <Year1>27400</Year1> <Year2>10000</Year2> <Year3>10000</Year3> </item> <item> <Month>February</Month> <Year1>11500</Year1> <Year2>28110</Year2> <Year3>23990</Year3> </item> <item> <Month>March</Month> <Year1>12500</Year1> <Year2>29800</Year2> <Year3>32700</Year3> </item> <item> <Month>April</Month> <Year1>27400</Year1> <Year2>10000</Year2> <Year3>29000</Year3> </item> <item> <Month>May</Month> <Year1>1500</Year1> <Year2>10000</Year2> <Year3>10000</Year3> </item> <item> <Month>June</Month> <Year1>19700</Year1> <Year2>32600</Year2> <Year3>32600</Year3> </item> <item> <Month>July</Month> <Year1>27400</Year1> <Year2>29700</Year2> <Year3>31900</Year3> </item> <item> <Month>August</Month> <Year1>27400</Year1> <Year2>10000</Year2> <Year3>21800</Year3> </item> <item> <Month>September</Month> <Year1>27400</Year1> <Year2>31800</Year2> <Year3>42800</Year3> </item> <item> <Month>October</Month> <Year1>27400</Year1> <Year2>15000</Year2> <Year3>11000</Year3> </item> <item> <Month>November</Month> <Year1>27400</Year1> <Year2>9800</Year2> <Year3>11800</Year3> </item> <item> <Month>December</Month> <Year1>27400</Year1> <Year2>22900</Year2> <Year3>20800</Year3> </item> </vector2> </data> </xf:instance> </xf:model>
<script>
<script type="javascript"><![CDATA[
// dataCollection이 셋팅되면 자동으로 차트가 그려짐 dataList2.setXML(WebSquare.ModelUtil.findInstanceNode('vector2'));]
</script><body>
<w2:fusionchart chartType="MSColumn2D" drawType="javascript" id="chart2" ref="data:dataList2" labelNode="Month" seriesColumns="[['Year1','Year2','Year3']]" style="height:280px;width:100%;"> </w2:fusionchart> <w2:fusionchart chartType="StackedColumn3DLineDY" drawType="javascript" id="chart3" ref="data:dataList2" labelNode="Month" seriesColumns="[['Year1','Year2',{'id':'Year3','seriesname':'Year New', 'renderas':'Line', 'showValues':'1', 'parentyaxis':'S'}]]" style="height:280px;width:100%;"></w2:fusionchart>
fusion5
Multi Serires Stacked Chart
<model>
<xf:model> <w2:dataCollection> <w2:dataList id="dataList3" baseNode="vector3" repeatNode="item" valueNode=""> <w2:columnInfo> <w2:column id="Year" name="Year" dataType="text></w2:column> <w2:column id="ProductA" name="Product A" dataType="number"></w2:column> <w2:column id="ProductB" name="Product B" dataType="number"></w2:column> <w2:column id="ServiceA" name="Service A" dataType="number"></w2:column> <w2:column id="ServiceB" name="Service B" dataType="number"></w2:column> <w2:column id="ServiceC" name="Service C" dataType="number"></w2:column> <w2:column id="Revenue" name="Cost as % of Revenue" dataType="number"></w2:column> <w2:column id="RevenueB" name="Cost as % of Revenue B" dataType="number"></w2:column> /w2:columnInfo> </w2:dataList> </w2:dataCollection> <xf:instance> <data xmlns=""> <<vector3> <item> <Year>2001</Year> <ProductA>30</ProductA> <ProductB>26</ProductB> <ServiceA>29</ServiceA> <ServiceB>31</ServiceB> <ServiceC>34</ServiceC> <Revenue>57</Revenue> <RevenueB>27</RevenueB> </item> <item> <Year>2002</Year> <ProductA>21</ProductA> <ProductB>28</ProductB> <ServiceA>39</ServiceA> <ServiceB>41</ServiceB> <ServiceC>24</ServiceC> <Revenue>68</Revenue> <RevenueB>67</RevenueB> </item> <item> <Year>2003</Year> <ProductA>27</ProductA> <ProductB>25</ProductB> <ServiceA>28</ServiceA> <ServiceB>31</ServiceB> <ServiceC>10</ServiceC> <Revenue>79</Revenue> <RevenueB>43</RevenueB> </item> <item> <Year>2004</Year> <ProductA>17</ProductA> <ProductB>16</ProductB> <ServiceA>29</ServiceA> <ServiceB>31</ServiceB> <ServiceC>34</ServiceC> <Revenue>73</Revenue> <RevenueB>25</RevenueB> </item> <item> <Year>2005</Year> <ProductA>30</ProductA> <ProductB>22</ProductB> <ServiceA>29</ServiceA> <ServiceB>43</ServiceB> <ServiceC>22</ServiceC> <Revenue>80</Revenue> <RevenueB>33</RevenueB> </item> </vector3> </data> </xf:instance> </xf:model>
<script>
<script type="javascript"><![CDATA[
// dataCollection이 셋팅되면 자동으로 차트가 그려짐 dataList3.setXML(WebSquare.ModelUtil.findInstanceNode('vector3’));
</script><body>
<w2:fusionchart chartType="MSStackedColumn2D" drawType="javascript" id="chart4" ref="data:dataList3" labelNode="Year" seriesColumns="[['ProductA','ProductB'], ['ServiceA','ServiceB',{'id':'ServiceC','showvalues':'1'}]]" style="height:280px;width:100%;"></w2:fusionchart> <!-- MSStackedColumn2DLineDY 차트의 경우 마지막 시리즈 배열은 LineDY로 인식합니다. --> <w2:fusionchart chartType="MSStackedColumn2DLineDY" drawType="javascript" id="chart5" ref="data:dataList3" labelNode="Year" seriesColumns="[['ProductA','ProductB'], ['ServiceA','ServiceB','ServiceC'],[{'id':'Revenue','linethickness':'2'},{'id':'RevenueB','linethickness':'5'}]]" style="height:280px;width:100%;"></w2:fusionchart>
fusion6
Scatter & Bubble Chart
<model>
<xf:model> <w2:dataCollection> <w2:dataList id="dataList4" baseNode="vector4" repeatNode="item" valueNode=""> <w2:columnInfo> <w2:column id="Server" name="Server" dataType="text"></w2:column> <w2:column id="X" name="X" dataType="number"></w2:column> <w2:column id="Y" name="Y" dataType="number"></w2:column> </w2:columnInfo> </w2:dataList> </w2:dataCollection> <xf:instance> <data xmlns=""> <vector4> <item> <Server>Server 1</Server> <X>21</X> <Y>2.4</Y> </item> <item> <Server>Server 1</Server> <X>43</X> <Y>2.5</Y> </item> <item> <Server>Server 1</Server> <X>43</X> <Y>3.5</Y> </item> <item> <Server>Server 1</Server> <X>23</X> <Y>1.5</Y> </item> <item> <Server>Server 1</Server> <X>33</X> <Y>1.6</Y> </item> <item> <Server>Server 2</Server> <X>41</X> <Y>1.1</Y> </item> <item> <Server>Server 2</Server> <X>43</X> <Y>2.5</Y> </item> <item> <Server>Server 2</Server> <X>43</X> <Y>1.5</Y> </item> <item> <Server>Server 2</Server> <X>50</X> <Y>3.2</Y> </item> <item> <Server>Server 2</Server> <X>22</X> <Y>4.3</Y> </item> </vector4> </data> </xf:instance> </xf:model>
<script>
<script type="javascript"><![CDATA[
// dataCollection이 셋팅되면 자동으로 차트가 그려짐 dataList4.setXML(WebSquare.ModelUtil.findInstanceNode('vector4’));
</script><body>
<!-- seriesColumns : X, Y, Z의 컬럼 ID를 순서대로 설정 --> <w2:fusionchart chartType="Scatter" drawType="javascript" id="chart6" ref="data:dataList4" labelNode="Server" seriesColumns="[['X','Y']]" style="height:280px;width:100%;"></w2:fusionchart>
fusion8
Zoom Line Chart
Zoom Line Chart의 경우 두 가지 데이타 구조를 지원합니다.
Standard Multi-series JSON Data: 9.1.1.2 Multi Series Charts / Combination Chart와 동일
Compact JSON data: 이 형식은 JSON의 크기와 구문 분석 시간을 줄일 수 있습니다. 차트에 표시 할 1,000 개 이상의 데이터 포인트가 있을 때에는 해당 형식을 사용 하시기 바랍니다. Compact JSON data를 사용하기 위해서는 차트 Attribute에 필수적으로 compactdatamode와 dataseparator을 넣어주셔야 합니다.
아래는 Compact JSON data를 사용한 샘플입니다.
<model>
<xf:model>
<w2:dataCollection>
<w2:dataList id="dataList5" baseNode="vector5" repeatNode="item" valueNode="">
<w2:columnInfo>
<w2:column id="Month" name="Month" dataType="text"></w2:column>
<w2:column id="Year1" name="2005" dataType="number"></w2:column>
<w2:column id="Year2" name="2006" dataType="number"></w2:column>
</w2:columnInfo>
</w2:dataList>
</w2:dataCollection>
<xf:instance>
<data xmlns="">
<vector5>
<!-- Compact JSON data -->
<item> <Month>January-07|February-07|March-07|April-07|May-07|June-07|July-07|August-07|September-07|October-07|November-07|December-07|January-08|February-08|March-08|April-08|May-08|June-08|July-08|August-08|September-08|October-08|November-08|December-08|January-09|February-09|March-09|April-09|May-09|June-09|July-09|August-09|September-09|October-09|Nevember-09|December-09|January-10|February-10|March-10|April-10|May-10|June-10|July-10|August-10|September-10|October-10|November-10|December-10||
</Month> <Year1>||||16|41|64|53|78|47|91|23|72|49|27||26|49|27|41|35|12|24|10|79|71|74|84|43|63|40|59|64|59|52|55|20|22|61|57|61|05|15|39||32|31|25|14|44
</Year1> <Year2>23|69|80|49|69|01|04|46|27|40|25|22|39|10|46|44|16|39|10|30|23|30|42|78|45||70|59|35|34|8|45|83|50|97|17|73|49|17|14|28||84|32|62|25|78|31|56|19
</Year2>
</item>
</vector5>
</data>
</xf:instance>
</xf:model><script>
<script type="javascript"><![CDATA[
//chart7 Attribute 세팅
var options = { "caption":"Web visits", "compactdatamode":"1", "dataseparator":"|" }
chart7.setChartAttribute(options);
// dataCollection이 셋팅되면 자동으로 차트가 그려짐 dataList5.setXML(WebSquare.ModelUtil.findInstanceNode('vector5’));
</script><body>
<w2:fusionchart chartType="ZoomLine" drawType="javascript" id="chart7" ref="data:dataList5" labelNode="Month" seriesColumns="[['Year1','Year2']]" style="height:280px;width:100%;"></w2:fusionchart>
fusion9
Pie 및 Doughnut을 모두 지원하는 차트
Pie 차트나 Doughnut 차트는 Single-series Chart 입니다.
같은 데이터 구조를 가지는 차트는 타입만 바꾸면 차트를 변경할 수 있습니다.
다음은 togglePieSlice() API를 사용하여 Pie 및 Doughnut 형태 모두를 지원하는 차트 예제입니다.fusion1
사용자가 Toggle 버튼을 누르면 togglePieSlice() API가 실행되어 3번째 조각을 파이에서 떨어져 나가게 합니다.
fusion2
선택 박스에서 Doughnut3D를 선택하면 Doughnut3D 차트로 바뀝니다.
$r_title(예제 소스)
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:w2="http://www.inswave.com/websquare" xmlns:xf="http://www.w3.org/2002/xforms">
<head>
<w2:buildDate />
<xf:model>
<xf:instance>
<data xmlns=""/>
</xf:instance>
</xf:model>
<script type="javascript"><![CDATA[
var circle = {
"chart": {
},
"data": [
{
"label": "Leverling",
"value": "100524"
},
{
"label": "Fuller",
"value": "87790"
},
{
"label": "Davolio",
"value": "81898"
},
{
"label": "Peacock",
"value": "76438"
},
{
"label": "King",
"value": "57430"
},
{
"label": "Callahan",
"value": "55091"
},
{
"label": "Dodsworth",
"value": "43962"
},
{
"label": "Suyama",
"value": "22474"
},
{
"label": "Buchanan",
"value": "21637"
}
] };
var circle_options = {
"caption": "Sales Per Employee for year 1996",
"formatnumberscale": "0",
"numberprefix": "$",
"pieslicedepth": "30",
"startingangle": "125",
"showLegend":"1"
};
chart_ref1.setChartAttribute(circle_options);
chart_ref1.setJSONData(circle);
]]></script>
</head>
<body>
<w2:fusionchart id="chart_ref1" style="position: absolute ;left: 40px; top: 50px; width:450px; height: 300px;" chartType="Pie2D" drawType="javascript"></w2:fusionchart>
<xf:select1 disabledClass="w2selectbox_disabled" appearance="minimal" direction="auto" chooseOption="" id="selectbox3" style="position: absolute ;left: 500px;top: 80px;width: 186px;height: 30px;" displayMode="label" allOption="" disabled="false" submenuSize="auto">
<xf:choices>
<xf:item>
<xf:label>Pie2D</xf:label>
<xf:value>Pie2D</xf:value>
</xf:item>
<xf:item>
<xf:label>Pie3D</xf:label>
<xf:value>Pie3D</xf:value>
</xf:item>
<xf:item>
<xf:label>Doughnut2D</xf:label>
<xf:value>Doughnut2D</xf:value>
</xf:item>
<xf:item>
<xf:label>Doughnut3D</xf:label>
<xf:value>Doughnut3D</xf:value>
</xf:item>
</xf:choices>
<script type="javascript" ev:event="onchange"><![CDATA[
var type = selectbox3.getValue();
var chart = chart_ref1.fc().clone({"type":type,"id":"fc_"+type});
chart.render(chart_ref1.render);
]]></script>
</xf:select1>
<xf:group id="group16" class="" style="position: absolute ;left: 500px;top: 50px;">
<xf:input id="input1" style="width: 100px;height: 22px;margin-right:3px;"></xf:input>
<xf:trigger type="button" id="trigger7" style="width:73px;height:27px;">
<xf:label>toggle</xf:label>
<script type="javascript" ev:event="onclick"><![CDATA[
var num = input1.getValue();
var chart = FusionCharts.items;
chart[chart_ref1.render.childNodes[0].id].togglePieSlice(num);
]]></script>
</xf:trigger></xf:group>
</body>
</html>Submission 이용
fusion3
$r_title(FusionChart_Adv_001_data.jsp)
<%@ page contentType="text/xml;charset=UTF-8" language="java" errorPage="" import="java.io.*,org.w3c.dom.*"
%><%
response.setContentType( "application/json" );
StringBuffer sb = new StringBuffer();
sb.append("{\"categories\":[{\"category\":[{\"label\":\"Quarter 1\"},{\"label\":\"Quarter 2\"},{\"label\":\"Quarter 3\"},{\"label\":\"Quarter 4\"}]}], \"dataset\":[{\"seriesname\":\"Product A\",\"data\":[{\"value\":\"659400\"},{\"value\":\"465400\"},{\"value\":\"764500\"},{\"value\":\"650500\"}]},{\"seriesname\":\"Product B\",\"data\":[{\"value\":\"546300\"},{\"value\":\"436500\"},{\"value\":\"546500\"},{\"value\":\"332500\"}]},{\"seriesname\":\"Product C\",\"data\":[{\"value\":\"657600\"},{\"value\":\"564600\"},{\"value\":\"348600\"},{\"value\":\"436600\"}]},{\"seriesname\":\"Product D\",\"data\":[{\"value\":\"436500\"},{\"value\":\"765700\"},{\"value\":\"453900\"},{\"value\":\"326400\"}]}]}" );
out.println( sb.toString() );
%>$r_title(전체 소스)
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:w2="http://www.inswave.com/websquare"
xmlns:xf="http://www.w3.org/2002/xforms">
<head>
<w2:buildDate />
<xf:model>
<xf:instance>
<data xmlns=""></data>
</xf:instance>
<xf:submission id="productInfo" ref="res" target="req" action="FusionChart_Adv_001_data.jsp" method="post" mediatype="application/json"
encoding="UTF-8" instance="" replace="instance" errorHandler="" customHandler="" mode="asynchronous" processMsg="">
<script type="javascript" ev:event="xforms-submit-done"><![CDATA[
productOrgObj = JSON.parse(e.responseText);
Product_Checkbox.checkAll( true );
// 속성 설정
chart1.setChartAttribute(attributeOptions);
// data 설정
chart1.setJSONData(productOrgObj);
]]></script>
</xf:submission>
</xf:model>
<script type="javascript"><![CDATA[
var productOrgObj; // 서브미션 후 받은 데이터를 저장할 object
// 기본 옵션 설정
var attributeOptions = {
"caption": "Product Wise Sales",
"formatNumberScale": "0",
"numberPrefix": "$"
};
function fn_init(){
// 서브미션 실행
WebSquare.ModelUtil.executeSubmission( "productInfo" );
}
// Chart Configuration chekcbox가 변경 될 때 차트 속성을 업데이트
function fn_AttributeData(){
if(Ani_Checkbox.getValue()){
attributeOptions["animation"] = "1";
}else{
attributeOptions["animation"] = "0";
}
if(Value_Checkbox.getValue()){
attributeOptions["showValues"] = "1";
attributeOptions["rotateValues"] = "1";
attributeOptions["placeValuesInside"] = "1";
}else{
attributeOptions["showValues"] = "0";
}
chart1.setChartAttribute(attributeOptions);
}
// Product chekcbox가 변경 될 때 차트 데이터 부분을 업데이트
function fn_productData(){
var data = Product_Checkbox.getValue(",");
var dataArr = data.split(",");
var productObj = {};
productObj["categories"] = productOrgObj["categories"] ;
productObj["dataset"] = [];
for(var i = 0; i < dataArr.length; i++){
for( var j = 0 ; j < productOrgObj["dataset"].length; j++){
if( dataArr[i] == productOrgObj["dataset"][j].seriesname){
productObj["dataset"].push(productOrgObj["dataset"][j]);
}
}
}
chart1.setJSONData(productObj);
fn_AttributeData();
}
fn_init();
]]></script>
<style type="text/css"><![CDATA[
.txt_box {
postion: relative;
padding: 20px;
background: #d9eef9;
border: 1px solid #93a7b2;
margin: 10px 0;
}
.txt_cont {
margin-top: 5px;
background: #d9eef9;
}
.txt_title{
color: #2a597d;
font-size: 12px;
font-weight: bold;
}
.sam-combg{
padding: 3px 3px 5px 3px;
background: #f2f2f2;
}
.pro_check .w2checkbox_label{
color: #444;
font-weight: bold;
float: left;
margin-right: 10px;
font-size:15px;
}
.config_check .w2checkbox_label{
color: #444;
float: left;
margin-right: 10px;
font-size:12px;
}
]]></style>
</head>
<body>
<xf:group id="frame_contents" style="position: relative;padding-left:5px;padding-right:5px;">
<xf:group id="desc1" style="" tagname="" class="txt_box">
<w2:textbox class="txt_title" id="title1" label="Example Application" style="position: relative;"></w2:textbox>
<xf:group class="txt_cont" id="group1" style="" tagname="ul">
<w2:textbox id="textbox1" label="FusionCharts에서 제공되고 있는 JavaScript Example Application을 수정한 샘플 파일입니다." style="" tagname="li"></w2:textbox>
<w2:textbox id="textbox4" label="서브미션 실행 후 데이터를 받아 차트를 그립니다." style="" tagname="li"></w2:textbox>
<w2:textbox id="textbox5" label="선택 된 checkbox에 따라 차트 내용이 업데이트 됩니다." style="" tagname="li"></w2:textbox>
</xf:group>
</xf:group>
<xf:group id="group2" class="" style="padding:15px;height:500px;width:600px;">
<xf:group id="group3" class="sam-combg" style="height:37px;">
<xf:select appearance="full" id="Product_Checkbox" style="height:30px;padding :3px;" selectedindex="-1" cols="4" rows=""
class="pro_check">
<xf:choices>
<xf:item>
<xf:label>Product A</xf:label>
<xf:value>Product A</xf:value>
</xf:item>
<xf:item>
<xf:label>Product B</xf:label>
<xf:value>Product B</xf:value>
</xf:item>
<xf:item>
<xf:label>Product C</xf:label>
<xf:value>Product C</xf:value>
</xf:item>
<xf:item>
<xf:label>Product D</xf:label>
<xf:value>Product D</xf:value>
</xf:item>
</xf:choices>
<script ev:event="onchange" type="javascript"><![CDATA[
fn_productData();
]]></script>
</xf:select>
</xf:group>
<xf:group id="group4" style="height:25px;padding-top:15px;">
<xf:group id="group5" style="height:20px;">
<xf:select id="Value_Checkbox" cols="2" appearance="full" style="float:right;;" class="config_check" selectedindex="-1"
rows="">
<xf:choices>
<xf:item>
<xf:label>Show Data Values?</xf:label>
<xf:value>true</xf:value>
</xf:item>
</xf:choices>
<script ev:event="onchange" type="javascript"><![CDATA[
fn_AttributeData();
]]></script>
</xf:select>
<xf:select id="Ani_Checkbox" cols="2" appearance="full" style="float:right;;" class="config_check" selectedindex="0" rows="">
<xf:choices>
<xf:item>
<xf:label>Animate chart whie chaging data?</xf:label>
<xf:value>true</xf:value>
</xf:item>
</xf:choices>
<script ev:event="onchange" type="javascript"><![CDATA[
fn_AttributeData();
]]></script>
</xf:select>
<w2:textbox id="textbox2" style="width:130px;float:right;color: #2a597d;font-size: 12px;font-weight: bold;height:15px;padding-top:5px;"
class="" label="Chart Configuration : ">
</w2:textbox>
</xf:group>
</xf:group>
<w2:fusionchart id="chart1" style="position:relative;width:600px; height: 400px;" chartType="MSBar2D" drawType="javascript" plotColor="AFD8F8,F6BD0F,8BBA00,A66EDD">
</w2:fusionchart>
</xf:group>
</xf:group>
</body>
</html>$r_title(FusionChart_Adv_001_data.jsp)
<%@ page contentType="text/xml;charset=UTF-8" language="java" errorPage="" import="java.io.*,org.w3c.dom.*"
%><%
response.setContentType( "application/json" );
StringBuffer sb = new StringBuffer();
sb.append("{\"categories\":[{\"category\":[{\"label\":\"Quarter 1\"},{\"label\":\"Quarter 2\"},{\"label\":\"Quarter 3\"},{\"label\":\"Quarter 4\"}]}], \"dataset\":[{\"seriesname\":\"Product A\",\"data\":[{\"value\":\"659400\"},{\"value\":\"465400\"},{\"value\":\"764500\"},{\"value\":\"650500\"}]},{\"seriesname\":\"Product B\",\"data\":[{\"value\":\"546300\"},{\"value\":\"436500\"},{\"value\":\"546500\"},{\"value\":\"332500\"}]},{\"seriesname\":\"Product C\",\"data\":[{\"value\":\"657600\"},{\"value\":\"564600\"},{\"value\":\"348600\"},{\"value\":\"436600\"}]},{\"seriesname\":\"Product D\",\"data\":[{\"value\":\"436500\"},{\"value\":\"765700\"},{\"value\":\"453900\"},{\"value\":\"326400\"}]}]}" );
out.println( sb.toString() );
%>MapChart
MapChart 컴포넌트는 d3 데이터를 이용하여 대한민국의 전국 지도를 다양한 형태로 시각화하여 표현할 수 있습니다.
요약 | d3 데이터를 이용하여 대한민국의 전국 지도를 다양한 형태로 시각화하여 표현. |
|---|---|
기능 및 특징 |
|
YouTube 동영상 |
|
YouTube 동영상 (https://youtu.be/BRcjBZ6xNeg)
지역명 위에 마커 표시
userMarker="true" 설정을 추가하면 지도의 지역명 위에 마커를 표시할 수 있습니다.
useMarker="false"
useMarker="true"
지도의 지역명 위에 마커를 클릭할 때 표시할 컨텍스트를 정의하는 함수의 이름은 contextFormatter 속성으로 정의한 후, 아래와 같이 직접 구현하십시오.
$r_title(contextFormatter로 지정한 함수 구현 (예))
scwin.mapchart1_contextFormatter = function(name, code) {
return "<br>Completed 0," + "<br>In-progress 0," + "<br>Scheduled 0";
}예제 파일
인터넷에서 다운로드 혹은
WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기
(/MapChart/useMarker_contextFormatter_MapChart.xml)
YouTube 동영상 (https://youtu.be/FU52N0D18mo)
각 마커의 표시 여부 및 적용할 스타일 설정
$r_title(사용 예) markerDefiner=“scwin.mapchart1_markerDefiner” markerClass=“class1,class2” markerClassDefiner=“scwin.mapchart1_markerClassDefiner”
$r_title(markerDefiner="scwin.mapchart1_markerDefiner" 구현 예)
scwin.mapchart1_markerDefiner = function(name, code) {
if (code % 2 == 1) {
return true;
} else {
return false;
}
};$r_title(Class 설정 예)
<style type="text/css">
<![CDATA[
.class1 {
fill: #588a8f;
}
.class1:hover {
fill: #e03a3a;
}
.class2 {
fill: #CC33CC;
}
.class2:hover {
fill: #CCCCFF;
}
]]>
</style>$r_title(markerDefiner="scwin.mapchart1_markerDefiner" 구현 예)
scwin.mapchart1_markerDefiner = function(name, code) {
if (code % 2 == 1) {
return true;
} else {
return false;
}
};예제 파일
인터넷에서 다운로드 혹은
WEBSQUARE_DEV_PACK의 GUIDE 프로젝트에서 보기
(/MapChart/markerDefiner_markerClass_markerClassDefiner_MapChart.xml)
YouTube 동영상 (https://youtu.be/tWLwvlwZW5Q)