짧은 리뷰 자바스크립트 라이브러리플로팅을 위해

하이차트

Highcharts는 웹사이트 또는 웹 애플리케이션을 위한 직관적인 대화형 차트를 제공하는 순수 HTML5/JavaScript 차트 라이브러리입니다. 하이차트현재 라인, 스플라인, 영역, 에리어스플라인, 컬럼, 바, 파이, 스캐터, 각도 게이지, 영역 범위, 에리어스플라인 범위, 컬럼 범위, 거품, 상자 플롯, 오차 막대, 깔때기, 폭포 및 극좌표 차트 유형을 지원합니다.

구글 차트

Google 차트 - 데이터 시각화 솔루션을 위해 설계된 다양한 차트를 제공합니다. 이 차트는 순수한 HTML5/SVG 기술(이전 버전의 IE에 대해 VML 허용)을 기반으로 하므로 플러그인이 필요하지 않습니다. 그들 모두는 대화식이며 그들 중 다수는 이동 및 확장이 가능합니다. 이 차트를 페이지에 추가하는 것은 몇 가지 간단한 단계로 수행할 수 있습니다.

캔버스JS

CanvasJS - 사용하기 쉬운 HTML5 및 JavaScript 라이브러리 차트 작성, 요소에 구축 캔버스. 그래프를 표시할 수 있습니다. 다양한 장치, 포함 모바일 기기, 아이패드, 안드로이드, 윈도우 폰, 마이크로소프트 서피스, 에 데스크탑 컴퓨터등. 이를 통해 웹 응용 프로그램의 유지 관리 가능성이나 기능을 손상시키지 않고 모든 장치에서 작동하는 기능적 그래픽을 만들 수 있습니다. 캔버스JS아름다운 테마와 함께 제공되며 일반 플래시보다 10배 더 빠르게 로드되며 SVG 그래프- 가볍고 아름다운 그래픽을 제공합니다.

차트JS

Chart JS - 경량의 객체 지향 클라이언트 측 차트 라이브러리입니다.

알 그래프

RGraph는 HTML5 캔버스 기반 및 20개 이상의 지원으로 웹 차트를 구축하기 위한 JavaScript 라이브러리입니다. 다양한 방식심상. RGraph는 JavaScript와 태그를 사용하여 웹 브라우저 내에서 HTML5 차트를 생성합니다. 캔버스.

용법 그래프와 차트매우 광범위한 응용 프로그램을 가지고 있습니다. 그들의 도움으로 많은 정보를 편리하고 이해하기 쉬운 방식으로 보여줄 수 있으므로 더 빨리 이해하고 이해할 수 있습니다.

웹 페이지에 그래프나 차트를 추가하는 방법에는 여러 가지가 있습니다. 첫 번째는 아마도 이미 생각했을 것입니다. 그래픽 편집기. 그러나 이것은 가장 편리하고 빠른 옵션이 아닙니다. 필요한 매개변수를 설정하고 페이지에서 보고 배치하기만 하면 되는 JavaScript로 그래프를 만드는 것이 훨씬 쉽고 빠릅니다.

이 기사에서는 10가지 서비스 및 도구, JavaScript에서 그래프와 차트를 만드는 데 도움이 됩니다. "" 제목에서 생성하는 다른 방법을 찾을 수 있습니다.

절벽
이 서비스를 사용하여 선 그래프를 그리려면 몇 줄의 코드를 복사하고 원하는 매개변수를 설정하고 텍스트를 추가하기만 하면 됩니다. 코드는 매우 간단하고 명확하여 몇 초 만에 이해할 수 있습니다.

PlotKit을 사용하면 모든 브라우저에서 올바르게 표시되는 차트와 그래프를 작성할 수 있습니다. 사이트에서 문서, 차트 유형의 예 및 빠른 가이드(모든 매개변수 및 설정에 대한 설명 포함) 빠르게 시작할 수 있습니다.

이 서비스를 사용하면 훌륭한 시각적 기능을 만들 수 있습니다. 방정식(예: 2*sin(4*x)^(x+4))을 입력하고 "Enter"를 누르면 기능이 준비됩니다. 그런 다음 URL을 복사하여 페이지에 붙여넣기만 하면 됩니다.

jQuery에서 테이블, 그래프 및 차트를 작성하기 위한 가장 강력한 도구입니다. 사이트에서 모든 유형의 차트의 예와 상세 설명매개변수 및 설정 단계.

함대
Google의 jQuery 차트 라이브러리. 이것에 대해 더 이상 쓸 수 없습니다. 모든 것이 이미 명확합니다(: 그러나 여전히 서비스가 제공한다는 점에 유의하십시오. 큰 금액유연하고 쉬운 사용자 정의가 가능한 아름다운 예.

데이터 히스토그램의 차트와 테이블을 생성할 수 있습니다. 빌드하려면 필요한 데이터를 입력하고 "계산" 버튼을 클릭해야 합니다. 다음으로, 코드를 복사하고 작은 스크립트를 다운로드하십시오. 원하는 경우 모든 데이터를 코드 자체에 입력할 수 있습니다.

6가지 종류의 차트( 파이 차트, 꺾은선형 차트, 동적 차트 및 3가지 히스토그램). 설정, 매개변수 및 자세한 예모든 종류의 다이어그램.

라파엘
Raphaël은 그래프와 차트 생성 작업을 크게 단순화하는 작은 JavaScript 라이브러리입니다. 이것은 이 리뷰에 제시된 모든 도구 중 가장 강력한 도구입니다. 라이브러리의 기능에 대한 설명을 읽는 것보다 라이브러리의 기능을 직접 보는 것이 더 쉬울 것입니다.

플로터
Mootools에서 차트를 작성하기 위한 라이브러리입니다. 아름답고 이해하기 쉬운 방식으로 정보를 제공하는 훌륭한 도구입니다. 그리고 그것을 구성하려면 값을 변경하거나 추가하기만 하면 됩니다.

이 서비스의 기능을 사용하면 3D 그래픽을 구축할 수 있습니다. 기능 면에서 간단한 설정을 강조할 가치가 있으며, 빠른 작업스크립트 및 코사인 및 사인 그래프를 그리는 기능.

상호 운용성 측면에서 Fleet은 확실히 jQuery에 가능한 한 Flash 그래픽에 가깝게 만들 것입니다. 플롯 출력이 매우 매끄럽고 보기에도 좋지만 데이터 포인트와 상호 작용할 수도 있습니다. 데이터 포인트 위로 마우스를 가져 가면 시각적 개체를 얻을 수 있습니다. 피드백그래프의 이 점의 값에서.

트렁크의 플릿 버전은 파이 차트를 지원합니다.

함대를 확장하는 능력.

또한 그래프의 섹션을 선택하여 특정 "영역"에 대한 데이터를 반환하는 옵션도 있습니다. 이 "구역화"에 대한 추가 기능으로 그래프에서 영역을 선택하고 데이터 포인트를 조금 더 가까이 보기 위해 확대할 수도 있습니다. 아주 멋져요.

스파크라인

제한 사항: 파이, 라인, 바, 조합

Sparklines는 제가 가장 좋아하는 미니 그래픽 도구입니다. 도구 모음 스타일 차트에 정말 좋습니다. 구글 애널리틱스다음에 로그인할 때). 매우 작기 때문에 문자열에 포함될 수 있습니다(위의 예와 같이). 모든 그래픽 플러그인에서 사용할 수 있는 또 다른 좋은 아이디어는 자동 업데이트 기능입니다. 그들의 Mouse-Speed ​​​​데모는 최고의 라이브 차트의 힘을 보여줍니다.

쿼리 차트 0.21

제약 조건: Area, Line, Bar 및 이들의 조합

jQuery Chart 0.21은 가장 예쁜 차트 플러그인이 아니므로 여기에 나열되어야 합니다. 처리할 수 있는 차트에 관해서는 기능면에서 매우 기본적이지만 시간과 노력을 투자할 수만 있다면 유연할 수 있습니다.

차트에 값을 추가하는 것은 비교적 간단합니다.

ChartAdd(( "레이블": "리드", "유형": "선", "색상": "#008800", "값": ["100","124","222","44"," 123","23","99"]));

jQchart

제한사항: 바, 라인

jQchart는 이상합니다. 애니메이션 트랜지스터와 차트에 끌어다 놓기 기능이 내장되어 있지만 약간 투박하고 무의미해 보입니다. CSS를 올바르게 설정하면 멋진 차트가 생성되지만 더 좋습니다.

터프테그래프

제약 조건: 막대 및 누적 막대

Tuftgraph는 스스로를 "어머니에게 보여줄 예쁜 막대 그래프"로 판매합니다. 가까워질수록 Fleet은 더 예쁘지만 Tuft는 스스로를 매우 가볍게 만듭니다. 그것이 제한 사항이 끝나는 곳이지만 선택한 것을 얻을 수 있도록 선택할 수있는 여러 옵션이 있습니다. 빠른 승리 카드를 보십시오.

그래프는 데이터를 표시할 때 훌륭한 시각적 보조 도구입니다. 그들 없이는 고품질 관리자 패널을 만드는 것이 불가능합니다. 설치가 쉽지 않습니다. 그러나 이 작업을 더 쉽게 만들어 주는 새로운 라이브러리인 xCharts가 있습니다. 오늘 우리는 이 도구를 Bootstrap의 Twitter Date Range 팔레트와 함께 사용하여 MySQL 테이블에서 데이터를 검색하는 웹 애플리케이션을 위한 아름다운 AJAX 차트를 만들 것입니다.

HTML

이 언어의 데모 구조는 매우 간단합니다. 플로팅을 시작하고 정보를 선택하려면 페이지에 요소를 추가해야 합니다. 어쨌든 페이지에 로드할 수 있도록 설정했기 때문에 스타일 지정 양식과 아이콘을 사용하여 이 구조를 멋지게 보이게 할 수 있습니다.

index.php

외부 리소스를 많이 사용합니다. 메인 섹션에는 xCharts용 계단식 스타일시트 파일, 숫자 분류기, 다운로드(초고속 CloudFlare CDN에서 통합) 및 style.css 파일이 있습니다.

테이블 레이블을 닫기 전에 JQuery 라이브러리인 d3.js(xcharts 프로그램에 필요), xcharts, 다음이 포함된 라이브러리가 있습니다. 사용자 친화적 인 인터페이스 sugar.js('dates' 범위의 플러그인 필요), 'dates' 범위의 플러그인, script.js 파일. 다음으로 모든 것이 함께 작동하는 방식을 확인할 수 있습니다.

MySQL

소개에서 언급했듯이 우리가 작성하는 스크립트는 MySQL 테이블에서 데이터를 가져와 차트에 표시합니다. 상위 버튼을 사용하여 다운로드할 수 있는 압축 파일의 schema.sql에서 테이블을 생성할 SQL 코드를 찾을 수 있습니다. 테이블은 다음과 같습니다.

열이 세 개뿐입니다. "날짜" 열에는 고유 인덱스가 할당되어 동일한 날짜에 중복 항목이 있을 수 없습니다. "판매 기록" 열은 하루 동안의 판매 수를 나타냅니다. 데이터베이스는 확실히 다르지만 PHP 스크립트에서 JSON 정보를 교환하는 데 사용되는 일반 텍스트 형식으로 데이터를 구조화하는 형식에서 정답을 얻는 한 더 이상 문제가 없습니다(자세한 내용은 다음에서 부분).

메모: setup.php에 MySQL 연결 세부 정보를 입력하는 것을 잊지 마십시오. 그런 다음 새 기반을 만들어야 합니다. MySQL 데이터 PHPMyAdmin 시스템 또는 선택한 관리 시스템에서 schema.sql을 가져옵니다.

PHP

우리의 PHP 스크립트전달된 초기 및 최종 정보에 해당하는 테이블에서 레코드를 선택하고 배열의 모든 데이터를 수집하고 텍스트 형식데이터 교환(JSON):

아약스.php

Header("콘텐츠 유형: 애플리케이션/json"); // 라이브러리 설정 require_once("setup.php"); if (isset($_GET["start"]) AND isset($_GET["end"])) ( $start = $_GET["start"]; $end = $_GET["end"]; $data = array(); // 결과 선택 $results = ORM::for_table("chart_sales") ->where_gte("date", $start) ->where_lte("date", $end) ->order_by_desc("date") ->find_array(); // 데이터가 있는 새 배열을 만듭니다. foreach ($results as $key => $value) ( ​​​​$data[$key]["label"] = $value["date"]; $ data[$ key]["value"] = $value["sales_order"]; ) echo json_encode($data); )

여기에서 내가 가장 좋아하는 라이브러리인 Idiorm을 사용하고 있습니다. 과거에 웹사이트 상담(및 많은 개인 프로젝트)에 사용했습니다. 하나의 파일(라이브러리/폴더에 있음)이며 데이터베이스 작업을 훨씬 쉽게 만듭니다. 내가 하는 일은 검색 요청과 일치하는 시작 및 종료 타임스탬프 사이의 시간 값이 있는 데이터베이스에서 모든 결과를 가져오는 것뿐입니다.

결과 JSON 응답은 다음과 같습니다.

[( "레이블": "2013-01-07", "값": "4" ), ( "레이블": "2013-01-06", "값": "65" ), ( "레이블": "2013-01-05", "값": "96")]

레이블 속성에는 해당 행의 MySQL 숫자 값이 포함되고 열에는 해당 날짜의 판매량이 포함됩니다. 이 데이터를 적절하게 처리하고 적합한 형식으로 재구성하는 것은 JavaScript 코드에 달려 있습니다. 나누는 xCharts 플러그인으로.

자바스크립트

모든 JS 코드는 assets/js/script.js에 포함되어 있습니다. 코드가 조금 길어서 따라하기 쉽도록 나누어서 보여드리겠습니다.

먼저 몇 가지 변수를 설정하고 날짜 범위 선택기 플러그인을 초기화합니다. 내가 사용한 데이터 범위는 원래 플러그인의 파생물입니다. 원본이 xCharts와 충돌하는 레거시 데이터 라이브러리인 date.js에 의존하기 때문에 이 버전으로 작업하기로 결정했습니다. 대신, sugar.js가 사용됩니다. 신뢰할 수 있고 최신 정보를 제공하는 매우 유용한 라이브러리입니다.

자산/js/스크립트.js

$(function() ( // shugar 함수를 사용하여 기본 날짜 설정 var startDate = Date.create().addDays(-6), // 6일 전 endDate = Date.create(); // 오늘 var range = $ ( "#range"); // 입력 순서대로 날짜 표시 range.val(startDate.format("(MM)/(dd)/(yyyy)") + " - " + endDate.format("(MM)/ ( dd)/(yyyy)")); // 차트 로드 ajaxLoadChart(startDate,endDate); range.daterangepicker(( startDate: startDate, endDate: endDate, 범위: ( "오늘": ["오늘", "오늘" ]) , "어제": ["어제", "어제"], "지난 7일": , "지난 30일": // 당신은 할 수 있습니다여기에 더 많은 항목을 추가하십시오) ),function(start, end)( ajaxLoadChart(start, end); ));

보시다시피, 우리는 초기 및 종점범위. 지난 7일 간의 결과를 스크립트에 입력하고 범위 입력 필드를 업데이트했습니다.

이제 차트를 만들어 보겠습니다.

// 차트 위로 마우스를 가져갈 때 힌트 var tt = $("