아이콘 컨트롤 Highcarts 사용 안내

12676 단어
1. 머리말 (Preface)
Highcarts 는 매우 유행 하고 인터페이스 가 아름 다운 순수한 자 바스 크 립 트 도표 라 이브 러 리 이다.그것 은 주로 두 부분 을 포함한다. 하 이 카 트 와 하 이 스 탁 이다.
Highcarts 는 귀하 의 사이트 나 웹 응용 프로그램 에 직관 적 이 고 상호작용 적 인 도 표를 제공 할 수 있 습 니 다.현재 지원 선, 견본, 면적, areaspline, 기둥 그림, 막대 그림, 떡 그림 과 산 점도 유형.
Highstock 은 주식 이나 일반적인 시간 축 도 표를 편리 하 게 만 들 수 있 습 니 다.이것 은 선진 적 인 네 비게 이 션 옵션, 미리 설 정 된 날짜 범위, 날짜 선택 기, 스크롤 과 이동 등 을 포함한다.
Highcarts 에 대한 정 보 를 더 알 고 싶다 면 홈 페이지 를 참고 하 세 요.http://www.highcharts.com。
 
2. 설치 (설치)
1. Highcarts 는 jQuery, MooTool, Prototype 등 Javascript 프레임 워 크 를 이용 하여 기본 적 인 Javascript 작업 을 처리 합 니 다.따라서 Highcarts 를 사용 하기 전에 페이지 머리 에 이 스 크 립 트 파일 을 참조 해 야 합 니 다.jQuery 를 기본 프레임 워 크 로 사용 하려 면 페이지 머리 에 jQuery 와 Hightcharts 두 파일 을 동시에 참조 해 야 합 니 다.다음 과 같다.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="/js/highcharts.js" type="text/javascript"></script>

Highcarts (Highstock) 에는 jQuery 어댑터 (adapter) 가 내장 되 어 있 습 니 다. (주: jQuery 프레임 워 크 가 가장 유행 하기 때 문 일 수 있 습 니 다) 하지만 MooTool 등 다른 javascript 프레임 워 크 의 어댑터 (adapter) 는 내장 되 어 있 지 않 습 니 다.따라서 MooTool 등 다른 JS 프레임 워 크 를 사용 할 때 어댑터 (adapter) 스 크 립 트 파일 을 따로 참조 해 야 합 니 다.다음 과 같다.
<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js" type="text/javascript"></script>
<script src="/js/adapters/mootools-adapter.js" type="text/javascript"></script>
<script src="/js/highcharts.js" type="text/javascript"></script>

알림: Highstock 설치
프로 세 스
위 와 같다
，
제외 하 다
자 바스 크 립 트 파일
명칭.
예.
highstock.js
... 이 아니 라
highcharts.js
。
2. 웹 페이지 머리 에 있 는 스 크 립 트 탭 이나 단독 js 파일 에 자 바스 크 립 트 코드 를 추가 하여 도 표를 초기 화 합 니 다.renderTo 매개 변 수 는 도표 렌 더 링 의 위 치 를 설정 하 는 데 사 용 됩 니 다. 일반적으로 ID 가 있 는 DIV 요소 입 니 다 (3 단계 참조).
var chart1; //     
$(document).ready(function() {
      chart1 = new Highcharts.Chart({
         chart: {
            renderTo: 'container',
            type: 'bar'
         },
         title: {
            text: 'Fruit Consumption'
         },
         xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
         },
         yAxis: {
            title: {
               text: 'Fruit eaten'
            }
         },
         series: [{
            name: 'Jane',
            data: [1, 0, 4]
         }, {
            name: 'John',
            data: [5, 7, 3]
         }]
      });
   });

상기 코드 는 jQuery 를 기본 프레임 워 크 로 사용 하 는 경우 에 적 용 됩 니 다. $(document). ready () 함 수 는 문서 로드 가 완 료 된 후에 해당 하 는 처 리 를 하 는 것 을 의미 합 니 다.MooTool 등 다른 JS 프레임 워 크 를 사용 하려 면 $(document). ready () 함 수 를 대체 할 코드 를 사용 해 야 합 니 다.
Highstock 도 표를 만 들 려 면 Highcarts. StockChart 를 사용 하 는 단독 구조 방법 이 있 습 니 다.이 도표 에서 데이터 원본 은 전형 적 인 자바 스 크 립 트 배열 데이터 이다.원본 은 단독 자바 스 크 립 트 파일 이나 Ajax 를 통 해 원 격 서버 에서 제공 하 는 데 이 터 를 호출 할 수 있 습 니 다.
var chart1; //     
$(document).ready(function() {
      chart1 = new Highcharts.StockChart({
         chart: {
            renderTo: 'container'
         },
         rangeSelector: {
            selected: 1
         },
         series: [{
            name: 'USD to EUR',
            data: usdtoeur //     
         }]
      });
   });

3. 페이지 에 DIV 요 소 를 추가 하여 Highcarts 그래프 를 설치 하 는 용기 로 사용 합 니 다.
ID 값 을 설정 하고 2 단계 rendTo 인자 와 연결 해 야 합 니 다.설정 한 너비 와 높이 는 Highcarts 도표 의 너비 와 높이 로 합 니 다.
<div id="container" style="width: 100%; height: 400px"></div>

4. Highcarts. setOptions 방법 을 통 해 Highcarts 도표 에 전체적인 테 마 를 설정 할 수 있 습 니 다 (선택 가능).
포함
네 개
미리 정 의 된 테마 가 필요 하 다 면
쓰다
... 에서
이것들
테마 highcharts. js 후 이 파일 들 을 참조 합 니 다.예 를 들 면:
<script type="text/javascript" src="/js/themes/gray.js"></script>

3. 인 자 를 설정 하 는 방법 (옵션 을 설정 하 는 방법)
Highcarts 는 자 바스 크 립 트 대상 구 조 를 사용 하여 파 라미 터 를 정의 합 니 다.옵션 의 값 은 문자열 과 숫자, 배열, 다른 대상, 심지어 함수 일 수 있 습 니 다.새 Highcarts. Chart 를 사용 하 는 도 표를 초기 화 할 때 options 대상 은 첫 번 째 매개 변수 로 전 달 됩 니 다.같은 페이지 에 인 자 를 사용 하려 면 옵션 대상 (options object) 을 정의 하여 옵션 을 설정 할 수 있 습 니 다.더 많은 내용 은 \ # 4 전처리 옵션 (Preprocessing the options) 을 참고 하 십시오.
 
4. 전처리 파라미터 (Preprocess the options)
설정 대상 (configuration object) 의 작업 원리 와 프로그램 으로 어떻게 실현 하 는 지 알 아 보 는 것 은 효율 적 인 Highcarts 도 표를 실현 하 는 데 매우 중요 하 다.자 바스 크 립 트 대상 의 기본 지식 을 소개 합 니 다.
위의 예 에서 Highcarts options 는 대상 글자 액면가 (object literals) 로 정의 되 었 다.이러한 방법 으로 설정 을 표시 하면 우 리 는 뚜렷 하고 가 독성 이 강 하 며 공간 이 낮은 설정 대상 을 차지 할 수 있 습 니 다.아래 의 이런 복잡 한 코드 는 C 프로그래머 에 게 비교적 익숙 할 수 있다.
//      
var options = new Object();

options.chart = new Object();
options.chart.renderTo = 'container';
options.chart.type = 'bar';

options.series = new Array();
options.series[0] = new Object();
options.series[0].name = 'Jane';
options.series[0].data = new Array(1, 0, 4);

자 바스 크 립 트 프로그래머 에 게 우 리 는 아래 스타일 을 사용 하 는 것 을 더 좋아한다.주의해 야 할 것 은 두 가지 실현 방식 의 결 과 는 완전히 같다 는 것 이다.
//      
var options = {
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'bar'
    },
    series: [{
        name: 'Jane',
        data: [1, 0, 4]
    }]
};

이름 을 가 진 대상 을 만 든 후, 우 리 는. 조작 자 를 통 해 구성원 을 확장 할 수 있 습 니 다.우리 가 이미 대상 을 정의 했다 고 가정 하 자.다음 코드 코드 는 다른 series 를 추가 합 니 다.options. series 는 배열 이라는 것 을 기억 하 십시오. 따라서 push 방법 을 사용 할 수 있 습 니 다.
options.series.push({
    name: 'John',
    data: [3, 4, 2]
})

또 하 나 는 사용 할 수 있 는 사실은 JavsScript 대상 에 게 점 기호 (.) 와 괄호 [] 는 등가 이다.그래서 이름 을 통 해 멤버 들 을 방문 할 수 있다.이것 은:
options.renderTo

등가
options['renderTo']

4.1 사례 학습: preprocessing the data from CSV
이 간단 한 예 를 통 해 우 리 는 기본 적 인 매개 변수 (options) 를 어떻게 설정 하 는 지 배 운 다음 에 Ajax 를 통 해 원 격 데 이 터 를 호출 하고 데 이 터 를 분석 하 며 마지막 으로 적당 한 형식 으로 보 여 줄 것 입 니 다.이 예 에서 우 리 는 jQuery 를 사용 하여 Ajax 요청 을 처리 합 니 다.물론 MooTool 이나 Prototype 을 사용 하여 유사 한 기능 을 실현 할 수도 있다.모든 코드 는 $(document). ready () 함수 에서 처 리 됩 니 다.이 예 의 효 과 를 data - from - csv. htm 에서 볼 수 있 습 니 다.
(1) 데이터 만 포 함 된 외부 CSV 파일 (데이터 원본) 을 만 듭 니 다.아래 데이터 파일 에서 첫 번 째 행렬 에서 분류의 이름 (필드 이름 과 유사) 을 볼 수 있 습 니 다.다음 줄 의 첫 번 째 위 치 는 series name (예 를 들 어 두 번 째 줄 의 'John') 을 보 여 주 었 고 그 다음 위 치 는 관련 값 (value) 을 보 여 주 었 습 니 다.실제 개발 과정 에서 저 희 는 이 파일 의 내용 을 만 들 기 위해 PHP 나 다른 서버 프로 그래 밍 언어 (C \ #, 자바 등) 를 자주 사용 합 니 다. 또는 XML 이나 JSON (JSON 은 XML 보다 가 벼 운) 과 같은 다른 태그 형식 을 선택 합 니 다. 이러한 상황 에서 jQuery 는 데이터 대상 자 체 를 분석 할 수 있 습 니 다.
Categories,Apples,Pears,Oranges,Bananas
John,8,4,6,5
Jane,3,4,2,3
Joe,86,76,79,77
Janet,3,16,13,15

(2) 기본 적 인 초기 매개 변 수 를 정의 합 니 다.
category s 와 series 대상 에 빈 배열 (empty arrays) 을 만 들 었 습 니 다. 잠시 후 데 이 터 를 추가 할 수 있 습 니 다.
var options = {
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'column'
    },
    title: {
        text: 'Fruit Consumption'
    },
    xAxis: {
        categories: []
    },
    yAxis: {
        title: {
            text: 'Units'
        }
    },
    series: []
};

(3) 데 이 터 를 불 러 옵 니 다.
jQuery 의. get 방법 을 통 해 데이터 파일. csv 의 내용 을 가 져 옵 니 다. success 리 셋 함수 에서 되 돌려 달라 고 요청 한 문자열 을 분석 하고 결 과 를 매개 변수 대상 에 추가 합 니 다.(options object) 의 categories 와 series 구성원 대상 에서 마지막 으로 도 표를 만 듭 니 다. Ajax callback 밖에서 도 표를 만 들 수 없습니다. 서버 가 돌아 오 는 데 이 터 를 기 다 려 야 하기 때 문 입 니 다. (요청 이 성공 하면 데 이 터 를 되 돌려 줍 니 다. 이 과정 은 비동기 입 니 다.)
$.get('data.csv', function(data) {
    // Split the lines
    var lines = data.split('
');
    
    // Iterate over the lines and add categories or series
    $.each(lines, function(lineNo, line) {
        var items = line.split(',');
        
        // header line containes categories
        if (lineNo == 0) {
            $.each(items, function(itemNo, item) {
                if (itemNo > 0) options.xAxis.categories.push(item);
            });
        }
        
        // the rest of the lines contain data with their name in the first position
        else {
            var series = {
                data: []
            };
            $.each(items, function(itemNo, item) {
                if (itemNo == 0) {
                    series.name = item;
                } else {
                    series.data.push(parseFloat(item));
                }
            });
            
            options.series.push(series);
    
        }
        
    });
    
    // Create the chart
    var chart = new Highcharts.Chart(options);
});

4.2 XML 데이터 불 러 오기
XML 파일 에서 데 이 터 를 불 러 오 는 것 은 CSV 파일 을 불 러 오 는 것 과 유사 합 니 다. Highcharts 는 미리 정 의 된 XML 데 이 터 를 처리 할 수 없습니다. 따라서 전체 과정 은 XML 데 이 터 를 작성 하고 해석 함 수 를 정의 합 니 다. CSV 파일 에 비해 XML 의 가장 큰 단점 은 태그 데 이 터 를 추가 한 것 입 니 다. (이것 도 JSON 을 선택 한 이유 입 니 다). XML 을 사용 하 는 것 은 최소한 소량의 데이터 에 대해 서 는 되 돌아 오 는 데 이 터 를 수 동 으로 분석 할 필요 가 없다 는 것 이 장점 입 니 다. jQuery 기 존의 DOM 분석 능력 을 사용 하여 XML 수 에 접근 할 수 있 습 니 다. data - from - xml. htm 에서 인 스 턴 스 를 볼 수 있 습 니 다. 데 이 터 는 data. xml 에 포함 되 어 있 습 니 다.
 
5. 이벤트 맵 (라 이브 차 트)
비록 설정 대상 (configuration object) 을 통 해 도 표를 정의 한 다음 에 선택적으로 미리 처리 (optionally preprocessed) 하고 마지막 으로 new Highcarts. Chart () 를 통 해그래프 를 초기 화하 고 렌 더 링 할 수 있 습 니 다. API 를 통 해 도 표를 바 꿀 수 있 습 니 다. chart, axis, series, point 대상 은 update, remove, addSeries, addPoints 등 여러 가지 방법 이 있 습 니 다. 완전한 목록 은 API 참조 (the API Reference) 아래 방법 과 속성 을 볼 수 있 습 니 다.
5.1 사례 학습: 서버 에 대한 라 이브 연결
다음 예 는 서버 에서 검색 하 는 데 이 터 를 1 초 에 한 번 씩 만 드 는 방법 을 보 여 줍 니 다. 우선, 사용자 정의 함수 requestData 를 만 들 려 고 합 니 다. 그래프 로 딩 이벤트 (load event) 에서 호출 한 다음 Ajax 답장 수 success 에서 호출 합 니 다. live - server. htm 에서 결 과 를 볼 수 있 습 니 다.
1. 서버 를 만 듭 니 다. 이 예 에서 저 희 는 PHP 를 서버 스 크 립 트 언어 로 선택 하여 시간 (time) 과 y 값 (y value) 을 포함 하 는 자바 script 배열 을 되 돌려 줍 니 다. 다음은 live - server - data. php 파일 의 코드 입 니 다.
<?php
 // Set the JSON header
 header("Content-type: text/json");
 
 // The x value is the current JavaScript time, which is the Unix time multiplied by 1000.
 $x = time() * 1000;
 // The y value is a random number
 $y = rand(0, 100);
 
 // Create a PHP array and echo it as JSON
 $ret = array($x, $y);
 echo json_encode($ret);
 ?>

2. 전역 변 수 를 정의 합 니 다.
강조해 야 할 것 은 chart 전역 변 수 를 정의 해 야 합 니 다. document ready 함수 와 requestData 함수 가 모두 접근 해 야 하기 때 문 입 니 다.
var chart; // global

3. requestData 함 수 를 실현 합 니 다.
이 예 에서 jQuery 에서 $. ajax 함 수 를 사용 하여 ajax 업 무 를 처리 합 니 다. (다른 ajax 프레임 워 크 로 대체 할 수도 있 습 니 다) 데이터 가 서버 에서 성공 적 으로 돌아 온 후 addPoint 방법 으로 추가 할 수 있 습 니 다.
/**
  * Request data from the server, add it to the graph and set a timeout to request again
  */
 function requestData() {
     $.ajax({
         url: 'live-server-data.php',
         success: function(point) {
             var series = chart.series[0],
                 shift = series.data.length > 20; // shift if the series is longer than 20
 
             // add the point
             chart.series[0].addPoint(point, true, shift);
             
             // call it again after one second
             setTimeout(requestData, 1000);    
         },
         cache: false
     });
 }

4. 도표 만 들 기.
$(document).ready(function() {
     chart = new Highcharts.Chart({
         chart: {
             renderTo: 'container',
             defaultSeriesType: 'spline',
             events: {
                 load: requestData
             }
         },
         title: {
             text: 'Live random data'
         },
         xAxis: {
             type: 'datetime',
             tickPixelInterval: 150,
             maxZoom: 20 * 1000
         },
         yAxis: {
             minPadding: 0.2,
             maxPadding: 0.2,
             title: {
                 text: 'Value',
                 margin: 80
             }
         },
         series: [{
             name: 'Random data',
             data: []
         }]
     });        
 });

다음으로 이동:http://www.cnblogs.com/liuhaorain/archive/2012/01/24/2311352.html
[꼭대기] js 를 이용 하여 table 에 tbody 블록 을 추가 하여 전체 블록 의 추가 와 삭제 에 편리 합 니 다.
이더리움 학습2 - 테스트 체인 사용

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage