일신우일신

 사용할 위치에 태그 선언

1. <FusionChart3 Height="280" Id="FusionChart31" Left="297" Top="60" Width="673">
   </FusionChart3>

Chart에서 사용할 DataSet 선언

1. <Dataset Id="dds2">
    <Contents>
     <colinfo Id="c01_workDay" Size="256" Type="STRING"/>
     <colinfo Id="c02_genAmt" Size="256" Type="STRING"/>
     <colinfo Id="c03_objAmt" Size="256" Type="STRING"/>
     <colinfo Id="c04_rate" Size="256" Type="STRING"/>
    </Contents>
   </Dataset>

화면 로드시 Chart 초기화

1. var ds_row = dds2.AppendRow(); 
   dds2.SetColumn( ds_row,"c01_workDay", substr(tab.tabGd.calWorkDay.Value, 0, 6) ); // 기준일자
   dds2.SetColumn( ds_row,"c02_genAmt", 0);
   dds2.SetColumn( ds_row,"c03_objAmt", 0 );
   dds2.SetColumn( ds_row,"c04_rate", 0);
2. for(var i=1 ; i < 13 ; i++){
    var ds_row = dds2.AppendRow();
    dds2.SetColumn( ds_row,"c01_workDay", substr(AddMonth(tab.tabGd.calWorkDay.Value, -1*i), 0,6) ); // 기준일자
    dds2.SetColumn( ds_row,"c02_genAmt", 0);
    dds2.SetColumn( ds_row,"c03_objAmt", 0 );
    dds2.SetColumn( ds_row,"c04_rate", 0);
   }

필요하다면 DataSet 값의 단위 변경 (CallBack에서 처리)

1. for(var i=0 ; i < dds2.RowCount() ; i++){
2.  dds2.SetColumn(i, "c02_genAmt", Round( (parseFloat(dds2.GetColumn(i, "c02_genAmt"))/1000000), 0));
    dds2.SetColumn(i, "c03_objAmt", Round( (parseFloat(dds2.GetColumn(i, "c03_objAmt"))/1000000), 0));
    //dds2.SetColumn(i, "c03_objAmt", Round( (parseFloat(dds2.GetColumn(i, "c03_objAmt"))), 0));
    
    dds2.SetColumn(i, "c04_rate", Round( (parseFloat(dds2.GetColumn(i, "c02_genAmt"))/parseFloat(dds2.GetColumn(i, "c03_objAmt"))) * 100, -1));
3. }
4. makeChartBarGd();

Chart 속성 지정

1. function makeChartBarGd(){
    var objFusionchart = tab.tabGd.FusionChart31;
    
    objFusionchart.Clear();
    
    objFusionchart.AddPropValue("palette", '1');
    objFusionchart.AddPropValue("bgColor", 'ffffff,eee8f8'); 
    objFusionchart.AddPropValue("showBorder", '1'); 
    objFusionchart.AddPropValue("borderColor", 'c4bdd4'); 
    objFusionchart.AddPropValue("chartTopMargin", '8'); 
    objFusionchart.AddPropValue("chartBottomMargin", '8'); 
    objFusionchart.AddPropValue("chartLeftMargin", '0'); 
    objFusionchart.AddPropValue("chartRightMargin", '0'); 
    objFusionchart.AddPropValue("canvasBgAlpha", '0'); 
    
    objFusionchart.AddPropValue("shownames", '1');
    objFusionchart.AddPropValue("showvalues", '0');
    //objFusionchart.AddPropValue("numberPrefix", '$');
    //objFusionchart.AddPropValue("sYAxisValuesDecimals", '2');
    //objFusionchart.AddPropValue("connectNullData", '0');
    //objFusionchart.AddPropValue("PYAxisName", '');
    //objFusionchart.AddPropValue("SYAxisName", 'Quantity');
    objFusionchart.AddPropValue("numDivLines", '4');  // 구분선 갯수
    objFusionchart.AddPropValue("formatNumberScale", '0');
    //objFusionchart.AddPropValue("sNumberSuffix", '%25');
    
    for(var i=0; i<dds2.RowCount(); i++){
     var day = substr(dds2.GetColumn(i, "c01_workDay"), 0, 4) +"년"+ substr(dds2.GetColumn(i, "c01_workDay"), 4, 2);
     objFusionchart.Addcategory(day, "hoverText", day);
     
    }
2.  objFusionchart.AddDataset("dds2", "c03_objAmt", "seriesName", '', "color", '184184', 'dashed', '1');
    objFusionchart.AddDataset("dds2", "c02_genAmt", "seriesName", '', "color", '7bc342', 'dashed', '1');
    objFusionchart.AddDataset("dds2", "c04_rate", "seriesName", '', "color", 'ef3039', 'parentYAxis', 'S');
    
    tab.tabGd.FusionChart31.defineStyle("animation", "myanistyle", "param", "_xScale", "start", "0", "duration", "2", "alpha", "50");
    tab.tabGd.FusionChart31.defineStyle("Shadow", "myshadowstyle", "color", "CCCCCC");
    //FusionChart31.defineStyle("Bevel", "mybevelstyle", "shadowColor", "000000", "shadowAlpha", "80", "distance", "5", "angle", "45");
    tab.tabGd.FusionChart31.defineStyle("font", "myfontstyle", "face", "Arial", "size", "12", "color", "A52A2A", "bgcolor", "F8F8FF");
    
    tab.tabGd.FusionChart31.ApplyStyle("DataPlot", "mybevelstyle,myshadowstyle");
    tab.tabGd.FusionChart31.ApplyStyle("Canvas", "myanistyle");
    tab.tabGd.FusionChart31.ApplyStyle("caption", "myfontstyle,mybevelstyle"); 
    
    // xml data 생성
    var f_xmldata = objFusionchart.MakeChartData();
    f_xmldata += "       <style type='font' name='CaptionFont' size='15' color='666666' />  ";
    
    var strDir = gv_sHostName + "\\images\\swf"; //AliasToRealPath("%COMPONENT%");
    objFusionchart.Movie = strDir + "\\chart_v3\\MSColumn3DLineDY.swf";
    objFusionchart.SetVariable('dataXML', f_xmldata);
    objFusionchart.SetVariable('chartWidth', objFusionchart.Width); // chart size 지정
    objFusionchart.SetVariable('chartHeight', objFusionchart.Height); // chart size 지정
3.  objFusionchart.Stop();
    objFusionchart.Rewind(); 
    objFusionchart.Play();
4. }
   

이 글은 스프링노트에서 작성되었습니다.