fusioncarts 에서 클 라 이언 트 와 서버 로 그림 내 보 내기

14253 단어 FusionCharts
http://www.fusioncharts.com/docs/

  
    
< chart palette ='4' caption ='d'
xAxisName
='d' yAxisName ='fdsfds'
showValues
='0' decimals ='0'
formatNumberScale
='0' baseFontSize ='12'
useRoundEdges
='1' rotateYAxisName ='0'
exportEnabled
='1' exportAtClient ='0'
exportAction
='save'
exportHandler
='http://localhost:49905/funsion/FusionCharts/ExportHandlers/ASP_Net/FCExporter.aspx'
>
< set label ='d' value ='462' />
< set label ='Feb' value ='857' />
< set label ='Mar' value ='671' />
< set label ='Apr' value ='494' />
< set label ='May' value ='761' />
< set label ='Jun' value ='960' />

</ chart >
<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>FusionCharts v3 Documentation</title>

<link rel="stylesheet" href="../Contents/Style.css" type="text/css" />

<script language="JavaScript" src="../JSClass/FusionCharts.js"></script>

    <script src="../JSClass/FusionChartsExportComponent.js" type="text/javascript"></script>

    <script type="text/javascript" src="http://www.cnblogs.com/Scripts/jquery-1.4.1.js"></script>

<script type="text/javascript">

    function ExportMyChart() {

        var chartObject = getChartFromId('ChartId');

        //chartObject.print();

        chartObject.exportChart({ exportAtClient: '0', exportFormat: 'PDF' });

    }

    function FC_Exported(objRtn) {

        if (objRtn.statusCode == "1") {

            alert("The chart was successfully saved. Its DOM Id is " + objRtn.DOMId);

        } else {

            alert("There was an error saving the chart. Error message: " + objRtn.statusMessage + ". Its DOM Id is " + objRtn.DOMId);

        }

    }

    $(document).ready(function () {

        

    })

    setTimeout("ExportMyChart()", 3000);

</script>

</head>



<body>

<input type="button" onclick="ExportMyChart()" value="Export" />

<table width="98%" border="0" cellspacing="0" cellpadding="3" align="center">

  <tr> 

    <td valign="top" class="text" align="center"> <div id="chartdiv" align="center"> 

        FusionCharts. </div>

      <script type="text/javascript">

		 var chart = new FusionCharts("../Charts/Column2D.swf", "ChartId", "500", "300", "0"," 1");

		   chart.setDataURL("Data/Column2D.xml");		   

		   chart.render("chartdiv");

		</script> </td>

  </tr>

  <tr>

    <td valign="top" class="text" align="center"> </td>

  </tr>

  <tr> 

    <td valign="top" class="text" align="center"><a href="Data/Column2D.xml" target="_blank"><img src="../Contents/Images/BtnViewXML.gif" alt="View XML for the above chart" width="75" height="25" border="0" /></a></td>

  </tr>



</table>

<script type="text/javascript">





</script>

</body>

</html>


기능 특성 애니메이션                    데 이 터 를 애니메이션 으로 표시 할 지 여부 입 니 다.기본 값 은 1(True)show Names 입 니 다.                    가로 좌표 축(x 축)탭 이름 을 보일 지 여부 rotateNames                디 스 플레이 탭 을 회전 할 지 여부 입 니 다.기본 값 은 0(False)입 니 다.show Values 를 가로로 표시 합 니 다.                    도표 에 대응 하 는 데이터 값 을 표시 할 지 여부 입 니 다.기본 값 은 1(True)yAxis MinValue 입 니 다.                세로 축(y 축)최소 값,디지털 yAxis MaxValue 지정                 세로 축(y 축)최대 값,숫자 쇼 Limits 지정                    도표 제한 값(y 축 최대,최소 값)을 표시 할 지 여부 입 니 다.기본 값 은 1(True)showColumnShadow 입 니 다.     각 막대 그래프 사이 의 그림 자 를 표시 할 지 여부(기둥 그림 이 함께 있 으 면)show AlternateHGridColor 다른 색상 의 도표 제목 과 축 이름 caption 을 표시 할 지 여부                    도표 주 제목 subCaption                    도표 부제 xAxis Name                    가로 좌표 축(x 축)이름 yAxis Name                    세로 좌표 축(y 축)이름 imageSave='1'      이미지 이미지 저장 여부 SaveURL='Path/FusionChartsSave.jsp'이미지 경로
hoverCapSepChar=','。기둥 위 에 마 우 스 를 올 렸 을 때 표시 되 는 알림 메시지 의 구분자 쇼 hovercap='1'         마 우 스 를 기둥 위 에 올 렸 을 때 알림 정보 hoverCapbgColor='ffff'알림 정보 배경 색상 도표 와 캔버스 스타일 bgColor 를 표시 할 지 여부                    도표 배경 색,6 비트 16 진 색상 값 canvasbgColor                캔버스 배경 색,6 비트 16 진 색상 값 canvasbgAlpha                캔버스 투명도,[0-100]canvasBorderColor            캔버스 테두리 색상,6 비트 16 진 색상 값 canvasBorder Thickness        캔버스 테두리 두께,[0-100]shadowAlpha                투영 투명도,[0-100]show Legend                    시리즈 이름 을 표시 할 지 여부 입 니 다.기본 값 은 1(True)입 니 다.
글꼴 속성 baseFont                    도표 글꼴 스타일 baseFontSize                도표 글꼴 크기 baseFontColor                그래프 글꼴 색상,6 비트 16 진수 색상 값 outCnvBaseFont                그래프 캔버스 이외 의 글꼴 스타일 outCnvBaseFontSize            그래프 캔버스 이외 의 글꼴 크기 outCnvBaseFontColor        그래프 캔버스 이외 의 글꼴 색상,6 비트 16 진수 색상 값
파 티 션 라인 과 격자 numDivLines                캔버스 내부 수평 분할 라인 수,디지털 divLine Color                수평 분할 선 색상,6 비트 16 진 색상 값 divLine Thickness            수평 분할 선 두께,[1-5]divLine Alpha                수평 분할 선 투명도,[0-100]show AlternateHGridColor    가로 격자 대 에서 색상 을 바 꿀 지 여부 입 니 다.기본 값 은 0(False)alternateHGridColor 입 니 다.        가로 격자 대 교체 색상,6 비트 16 진 색상 값 alternateHGridAlpha        가로 격자 대의 투명도,[0-100]쇼 DivLine Values            Div 줄 의 값 을 표시 하 시 겠 습 니까?기본 값 입 니까?numVDivLines                캔버스 내부 수직 분할 라인 수,디지털 vDivLine Color                수직 분할 선 색상,6 비트 16 진 색상 값 vDivLine Thickness            수직 분할 선 두께,[1-5]vDivLineAlpha                수직 분할 선 투명도,[0-100]show AlternativeGridColor    세로 격자 대 에서 색상 을 바 꿀 지 여부 입 니 다.기본 값 은 0(False)alternativeGridColor 입 니 다.        세로 격자 대 교체 색상,6 비트 16 진 색상 값 alternateVGridAlpha        세로 격자 대의 투명도,[0-100]
숫자 형식 numberPrefix                숫자 접두사 숫자 추가 Suffix                숫자 접미사 추가    % '%25'/(톤)은'%ef%bc%88%e5%90%a8%ef%bc%89'(Server.UrlEncode 인 코딩)formatNumberScale 입 니 다.        숫자 를 포맷 할 지 여부 입 니 다.기본 값 은 1(True)입 니 다.자동 으로 K(천)또는 M(백만)을 추가 합 니 다.0 을 가 져 오 면 K 나 M decimal Precision 을 추가 하지 않 습 니 다.            소수 자리 의 자릿수 를 지정 합 니 다.[0-10]    예 를 들 어='0'추출 divLine DecimalPrecision    수평 분할 선의 값 작은 수의 자릿수 를 지정 합 니 다.[0-10]limits Decimal Precision        y 축 최대,최소 값 의 작은 수의 자릿수 를 지정 합 니 다.[0-10]formatnumber                쉼표 로 숫자(천 자리,백만 자리)를 구분 하고 기본 값 은 1(True)입 니 다.0 을 가 져 오 면 구분자 decimalSeparator 를 추가 하지 않 습 니 다.            소수 구분 자 를 지정 합 니 다.기본 값 은'thousandSeparator'입 니 다.            천 분 위 구분자 지정,기본 값 은','
도구-tip/Hover 제목 showhovercap                서 스 펜 션 설명 상 자 를 표시 할 지 여부 입 니 다.기본 값 은 1(True)hoverCapBgColor 입 니 다.            서 스 펜 션 설명 상자 배경 색,6 비트 16 진 색상 값 hoverCapBorderColor        서 스 펜 션 설명 상자 테두리 색상,6 비트 16 진 색상 값 hoverCapSepChar            서 스 펜 션 설명 상자 의 값 과 값 사이 의 구분 자 를 지정 합 니 다.기본 값 은','입 니 다.
접 는 선 그림 의 매개 변수 lineThickness                접 는 선의 두께 anchorRadius                접선 노드 반경,디지털 anchorBgAlpha                접선 노드 투명도,[0-100]anchorBgColor                접 는 선 노드 충전 색상,6 비트 16 진 색상 값 anchorBorderColor            접선 노드 테두리 색상,6 비트 16 진수 색상 값
set 태그 에 사용 할 인자 value                        데이터 값 color                        색상 링크                        링크(이 창 은[Url]을 열 고 새 창 은[n-Url]을 열 고 JS 함수[JavaScript:함수]를 호출 합 니 다)name                        가로 좌표 축 라벨 이름
showFCMenuItem='0'오른쪽 단 추 를 누 르 면 표시 되 지 않 습 니 다
1. varmyChart= newFusionCharts("../FusionCharts/FCF_Column3D.swf", "myChartId", "600", " 500"); 첫 번 째 인 자 는 SWF 파일 의 주소 입 니 다.두 번 째 는 도형 의 id 입 니 다.이 id 는 당신 이 마음대로 뭐라고 부 를 수 있 지만,주의해 야 합 니 다.뒤에서 우리 가 한 페이지 에 여러 개의 도형 이 있다 고 말 할 때,이 id 는 반드시 유일한 것 입 니 다.세 번 째 매개 변 수 는 도형 의 너비 이다.네 번 째 매개 변 수 는 도형 의 높이 이다.우 리 는 데이터 파일 의 주 소 를 설정 해 야 한다.1. myChart.setDataURL("Data.xml"); 마지막 으로 우 리 는 도형 을 지정 한 곳 에 과장 했다.1. myChart.render("chartdiv"); "chartdiv 는 바로 앞의 DIV 의 id 입 니 다.이것 은 도형 render 를'chartdiv'로 표시 합 니 다.현재 JSchart.html 를 실행 하면 Chart.html 와 같은 효 과 를 볼 수 있 습 니 다.자 바스 크 립 트 를 사용 하여 도형 을 불 러 오 는 것 이 더욱 편리 하고 직관 적 인 것 이 분명 하 다.
새 창 에서 페이지 를 열 려 면 연결 앞 에'n-'만 추가 하면 됩 니 다.아래 코드 와 같 습 니 다.1.
XML 데이터 노드 와 상용 속성 상세 설명 caption='제목'subcaption='하위 제목'clickURL='abc.jsp'전체 도 표를 클릭 할 때 abc.jsp xAxis Name=부서'numberPrefix='¥'데이터 접두사 단위 numberSuffix='개'데이터 접두사 단위 Decimals='2'는 두 개의 소 수 를 유지 합 니 다.반올림 forceDecimals='2'는 두 개의 소 수 를 강제로 보류 합 니 다.5.1 에서 5.10 yAxis Name='완 성률'로 전환 할 때 한자 한 자 를 사용 할 때 속성 을 추가 해 야 합 니 다.rotateYaxis Name='1'show Values='1'yAxis MaxValue='100'은 백분율 에 자주 사용 되 는 bgColor='99999,FFFFFF'그 라 데 이 션 bgColor='999999'단색 useRoundEdge='1'광선 효과 baseFont='송 체'baseFontSize='12'baseFontColor='3333333'

좋은 웹페이지 즐겨찾기