Computer >> 컴퓨터 >  >> 네트워킹 >> 인터넷

FusionCharts로 멋진 그래프 만들기

내용과 상관없이 화려한 비주얼 트릭에 쉽게 감동하는 상사가 있으신가요? 당신은 마케팅 유형의 사람입니까? 웹사이트를 소유하고 있고 멋진 플래시 그래프로 페이지를 활기차게 만들고 싶습니까? 정적 웹 페이지를 넘어서는 온라인 프리젠테이션 도구가 필요하십니까? 그런 다음 FusionCharts를 살펴봐야 합니다.

FusionCharts는 미학적으로 보기 좋은 애니메이션 Flash 그래프와 차트를 웹 프로젝트에 통합할 수 있는 Flash 차트 작성 소프트웨어입니다. FusionCharts는 일반 HTML 파일 또는 ASP, PHP, Ruby on Rail, Python 및 기타 웹과 함께 사용할 수 있는 영역, 막대, 파이, 열, 산포 등을 포함하여 광범위한 2D 및 3D 차트를 제공합니다. 기술. FusionCharts는 SQL 및 Oracle과 같은 데이터베이스에서도 작동합니다.

FusionCharts는 InfoSoft의 많은 제품 중 하나입니다. 다른 제품 중에서 Adobe Flash, Dreamweaver, FileMaker, Visual Basic 및 Google Gadgets용 대시보드용 Flash 위젯, Flash 맵 및 대화형 차트를 찾을 수 있습니다.

이 모든 프로그램은 비용이 들지만 FusionCharts에는 무료 버전도 있습니다! 페이웨어 솔루션보다 강력하지는 않지만 FusionCharts Free는 대부분의 가정 사용자에게 적합합니다. 또한 쉐어웨어 스타일의 워터마크 브랜딩이 없어 매우 방해가 되지 않습니다.

흥미가 있습니까? 음, FusionCharts를 설정하는 방법을 보여드리겠습니다. 이 튜토리얼에서는 한동안 사용해 볼 수 있는 FusionCharts v3를 사용하여 시연할 것입니다. 글쎄, 나는 모든 법적 측면을 당신에게 맡깁니다. 이 둘을 비교하려면 다음 페이지를 검토하십시오.

다운로드 및 설정

FusionCharts를 다운로드하려면 등록해야 합니다. 아카이브를 컴퓨터에 다운로드한 후 다운로드한 zip 파일을 원하는 폴더에 추출합니다.

첫 단계

방금 FusionCharts를 추출한 폴더를 엽니다. 꽤 많은 하위 폴더가 포함되어 있음을 알 수 있습니다.

FusionCharts로 멋진 그래프 만들기

파일은 첫 번째 웹 프로젝트를 생성하고 내부에서 FusionCharts를 사용하는 데 도움이 되는 문서/도움말 파일입니다. 지침을 읽는 데 시간을 할애해야 하지만 내 기사를 훑어볼 수도 있습니다.

프로젝트 생성

프로젝트를 위한 디렉토리를 생성해야 합니다. 만든 후에는 Charts 하위 폴더에 포함된 모든 파일을 프로젝트 폴더에 복사합니다. 이 파일은 SWF 형식임을 알 수 있습니다. 다음으로 JSClass 폴더에서 프로젝트 폴더로 FusionCharts.js 파일을 복사합니다.

참고:프리웨어 버전 사용자도 스크립트를 사용할 수 있습니다. 그러나 사용 가능한 차트 유형 모음은 더 작아집니다. 자세한 내용은 위의 비교를 참조하십시오.

물론 실제로 이렇게 할 필요는 없습니다. 웹 프로젝트에서와 마찬가지로 원하는 디렉터리를 사용한 다음 웹 코드에서 상대 경로를 사용하여 올바른 파일을 가리킬 수 있습니다. 그러나 FusionCharts를 처음 사용하는 경우 웹 페이지, 스크립트 및 플래시 차트가 모두 같은 폴더에 있으면 더 쉽습니다.

다음 단계는 차트용 데이터를 복사하고 생성하는 것입니다. FusionCharts에서는 XML을 데이터 컨테이너로 사용해야 합니다.

데이터 생성

무료 버전에서는 텍스트 편집기를 사용하여 직접 파일을 만들어야 합니다. 모든 기능을 갖춘 v3에서는 설정을 HTML 또는 관련 코드로 자동 변환할 수 있으므로 정말 편리한 XML 생성기 유틸리티를 사용할 수 있습니다.

XML 생성기는 Tools 하위 폴더에서 찾을 수 있습니다.

FusionCharts로 멋진 그래프 만들기

FusionCharts로 멋진 그래프 만들기

원하는 방식으로 데이터를 입력합니다. 완료되면 XML로 변환을 클릭합니다.

FusionCharts로 멋진 그래프 만들기

이제 데이터가 XML 형식으로 표시됩니다. 앞서 언급했듯이 예를 들어 메모장과 같은 텍스트 편집기를 사용하여 파일을 직접 만들 수 있습니다. 실제로 코드를 텍스트 편집기에 복사하고 파일을 something.xml로 저장해야 합니다.

FusionCharts 가이드에서는 Data.xml 파일을 호출할 것을 권장합니다. HTML 파일을 직접 편집하는 것이 불편하다면 기본 이름을 사용해야 합니다. 그렇지 않으면 원하는 이름을 사용할 수 있습니다.

FusionCharts로 멋진 그래프 만들기

차트 구성을 클릭하여 차트의 모양과 느낌을 사용자 지정합니다. 차트와 축에 제목과 부제목을 추가하고, 색상표를 변경하고, 그래프에 값을 표시하고, 기타 관련 속성을 표시할 수 있습니다.

FusionCharts로 멋진 그래프 만들기

그런 다음 HTML 생성을 클릭하여 파일을 만듭니다. 여기에서 차트 유형을 선택할 수 있습니다. 이 값은 이전에 복사한 SWF 파일을 직접 가리키므로 Charts 하위 폴더에서 차트 파일의 하위 섹션만 복사한 경우 프로젝트 폴더에 있는지 확인하십시오. 그렇지 않으면 프로젝트가 실제로 작동하지 않습니다. 있어야 할 곳에 이미지 파일이 없는 것과 같습니다.

그래프의 너비와 높이를 변경할 수도 있습니다. 나중에 HTML 코드를 변경하여 수동으로 조정할 수 있습니다.

FusionCharts로 멋진 그래프 만들기

마지막으로 내용을 텍스트 편집기에 복사하고 자신만의 HTML 파일을 만듭니다. 원하는대로 부르세요. 자세한 내용은 다운로드한 패키지에 포함된 파일을 참조하십시오.

데이터 검토

파일을 살펴보겠습니다. 다음은 Data.xml 파일입니다.

FusionCharts로 멋진 그래프 만들기

보시다시피 표준 XML입니다. 원하거나 방법을 알고 있는 경우 이 파일을 직접 편집할 수 있습니다. 값과 키를 변경하고 차트 캡션 등을 편집할 수 있습니다.

다음은 HTML 파일입니다.

FusionCharts로 멋진 그래프 만들기

파일이 있습니다. 원하는 비트는 FusionCharts 차트의 시작 코드와 FusionCharts 차트의 종료 코드라는 두 주석 사이에 포함됩니다. 원하는 프로젝트에 복사할 수 있습니다. .js 파일, .swf 파일, 차트 크기 등에 대한 상대 경로를 확인하십시오. 적합하다고 생각되는 모든 항목을 사용자 정의할 수 있습니다. 이제 FusionCharts가 무엇을 할 수 있는지 살펴보겠습니다.

뛰어난 그래프

2D 및 3D 파이와 같은 멋진 기능이 있습니다.

FusionCharts로 멋진 그래프 만들기

FusionCharts로 멋진 그래프 만들기

또 다른 예, 3D 바:

FusionCharts로 멋진 그래프 만들기

이 멋진 차트가 웹 페이지에 통합되었을 때 차트 전후에 약간의 텍스트가 있어 매우 괜찮은 기사를 만드는 모습을 살펴보겠습니다.

이제 가장 중요한 부분은 그래프를 조작하고, 회전하고, 데이터의 일부를 분리하는 등 모든 종류의 멋진 트릭을 수행할 수 있다는 것입니다. 물론 모든 일이 작동하려면 Javascript를 활성화하고 Flash 플러그인을 설치해야 합니다.

그래프에는 스타일을 추가하는 멋진 시작 애니메이션도 있습니다. 다음은 Wink를 사용하여 기록된 모습입니다.

미니 요약

결론[sic]으로 이동하기 전에 다음은 FusionCharts를 시작하고 실행하기 위해 수행해야 하는 간단한 단계 목록입니다.

  • 아카이브를 다운로드하고 압축을 풉니다.
  • Flash 파일(Charts 내부의 .swf 형식) 및 Javascript 파일(JSClass 내부의 .js)을 프로젝트 파일에 복사합니다. 단일 폴더 또는 여러 위치를 사용할 수 있습니다. 지식이 부족한 사용자는 통합된 단일 프로젝트 폴더를 사용해야 합니다.
  • 차트 데이터를 생성하여 텍스트 파일로 복사하고 Data.xml로 저장합니다.
  • HTML 코드를 만들고 사용자 정의한 다음 텍스트 파일에 복사하고 저장합니다. 원하는 대로 이름을 지정하세요. 모든 관련 파일의 위치에 대해 상대 또는 절대 경로를 사용할 수 있습니다. 고급 사용자는 원하는 방식으로 설정을 조정할 수 있습니다.
  • 새로 생성된 HTML 파일을 웹 브라우저에 로드하고 멋진 차트를 즐기기 시작합니다. 필요에 맞게 키, 값, 캡션, 크기, 유형, 팔레트를 변경합니다.

보시다시피 FusionCharts 설정은 플러그 앤 플레이 거래가 아니지만 확실히 실행 가능합니다. 어떤 종류의 웹 디자인에 이미 익숙하다면 온라인 프리젠테이션 기술을 사용하려는 경우 FusionCharts를 사용하는 것이 편할 것입니다. 당신이 초보자라면, 당신 앞에 몇 가지 작업이 있지만, 제 튜토리얼이 그것을 간단하게 만들었기를 바랍니다.

결론

FusionCharts는 확실히 유용하고 독특한 기술입니다. 빠르고 쉽게 온라인 프레젠테이션을 풍부하게 만들 수 있습니다. 무엇보다도 FusionCharts를 사용하기 위해 코드 마스터가 될 필요는 없습니다. 어려운 작업은 이미 완료되었으므로 멋진 그래프를 웹 페이지에 잘 배치하기만 하면 됩니다.

Wink 및 아마도 Slidy와 결합하면 치료를 받을 수 있습니다. 진지하게 생각한다면 전체 페이웨어 버전 구매를 고려할 수도 있습니다.

이 튜토리얼을 즐겼기를 바랍니다. 주위에 당신을보고.

건배.