>  기사  >  웹 프론트엔드  >  jQuery.Highcharts.js는 히스토그램 원형 차트 곡선을 그립니다.

jQuery.Highcharts.js는 히스토그램 원형 차트 곡선을 그립니다.

WBOY
WBOY원래의
2016-05-16 16:09:301243검색

데이터 통계 및 분석 사업에서 고객이 막대 차트, 파이 차트, 곡선 차트를 하나의 차트에 표시해야 하는 경우가 있습니다. 즉, 막대 차트에서 특정 데이터를 볼 수 있습니다. 막대 차트에서 변화하는 추세를 곡선 차트에서 볼 수 있으며, 데이터의 각 부분에 대한 비율을 파이 차트에서도 볼 수 있습니다. Highcharts는 세 장의 사진을 하나로 합치는 효과를 쉽게 얻을 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var 차트;
            $(문서).ready(함수() {
                차트 = 새로운 Highcharts.Chart({
                    차트: {
                        renderTo: '컨테이너',
                        defaultSeriesType: '지역'
                    },
                    제목: {
                        텍스트: '지역별 과거 및 추정 세계 인구 증가율'
                    },
                    자막: {
                        텍스트: '출처: Wikipedia.org'
                    },
                    x축: {
                        카테고리: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
                        TickmarkPlacement: 'on',
                        제목: {
                            활성화됨: 거짓
                        }
                    },
                    y축: {
                        제목: {
                            텍스트: '수십억'
                        },
                        라벨: {
                            포맷터: function() {
                                return this.value / 1000;
                            }
                        }
                    },
                    툴팁: {
                        포맷터: function() {
                            '' 반환
                                 this.x ': ' Highcharts.numberFormat(this.y, 0, ',') ' 수백만';
                        }
                    },
                    플롯 옵션: {
                        지역: {
                            스태킹: '보통',
                            lineColor: '#666666',
                            선폭: 1,
                            마커: {
                                선폭: 1,
                                라인 색상: '#666666'
                            }
                        }
                    },
                    시리즈: [{
                        이름: '아시아',
                        데이터: [502, 635, 809, 947, 1402, 3634, 5268]
                    }, {
                        이름: '아프리카',
                        데이터: [106, 107, 111, 133, 221, 767, 1766]
                    }, {
                        이름: '유럽',
                        데이터: [163, 203, 276, 408, 547, 729, 628]
                    }, {
                        이름: '아메리카',
                        데이터: [18, 31, 54, 156, 339, 818, 1201]
                    }, {
                        이름: '오세아니아',
                        데이터: [2, 2, 2, 6, 13, 30, 46]
                    }]
                });
            });

위 내용은 이 글에 설명된 내용의 전부입니다. jQuery를 사용하여 히스토그램과 파이 차트를 그리는 모든 분들께 도움이 되기를 바랍니다

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.