Highcharts 매우 실용적인 Javascript 통계 차트 데모 example_javascript 기술

Highcharts 공식 웹사이트: http://www.highcharts.com Highcharts 공식 웹사이트 예: http://www.highcharts.com/demo/ Highcharts 공식 웹사이트 문서: http://www.highcharts.com /documentation/ 사용 방법 공식 웹사이트 예시에는 다양한 데모가 제공되어 있으며 문서를 참조하여 필요한 사항을 수정할 수 있습니다. 다음은 학생 성적 동향 데모입니다.

코드 복사 코드는 다음과 같습니다. 하이차트 예시 $(function () { $('#container').highcharts({ chart: { type: 'spline' }, title: { text: '初三第一school期' }, xAxis: {

type: 'datetime', labels: { formatter: function() { return Highcharts.dateFormat('%Y-%m-%d', this.value); } } }, yAxis: { title: { text: '分数' }, min: 0 }, tooltip: { //这种模式下，每点的tooltip单独显示 shared: false, 포맷터: function() { var s = ' ' this.point.name ' ' 'Highcharts.dateFormat("%Y/% m/%d", this.point.x) ': ' this.point.y '分 '; return s; } /** 이 모드에서는 두 포인트의 툴팁이 함께 표시됩니다. shared: true, formatter: function() { var s='' $.each(this.points , function(i, point) { s = ' ' point.key ' ' Highcharts.dateFormat("%Y/%m/% d ", point.x) ': ' point.y 'fen '; }); return s; } * / }, 시리즈: [{ name: '英语', // 모든 시리즈에는 더미 연도 //가 있습니다. 동일한 x축에서 비교됩니다. // JavaScript에서 월은 1월은 0, 2월은 1에서 시작합니다.

data: [ {x:Date.UTC(1970) , 9, 27), y:55, 이름:'高一第一文期第一次考试'}, {x:Date.UTC(1970, 10, 10), y:60, 이름:'高一第一school期第二次考试'}, {x:Date.UTC(1970, 10, 18), y:70, name:'高一第一school期第三次考试'}, {x:Date.UTC(1970, 11, 2), y:80, name:'高一第一文期第四次考试'}, {x:Date.UTC(1970, 11, 9), y:60, 이름:'高一第一school期第五次考试'}, {x:Date.UTC(1970, 11, 16), y:60, 이름:'高一第一school期第六次考试'}, {x:Date.UTC(1970, 11, 28), y:67, name:'高一第一school期第七次考试'}, {x:Date.UTC (1971, 0, 1), y:81, 이름:'高一第一文期第八次考试'}, {x:Date.UTC(1971, 0, 8), y:78, 이름: '高一第一school期第九次考试'}, {x:Date.UTC(1971, 0, 12), y:98, name:'高一第一school期第十次考试'}, {x:Date.UTC(1971, 0, 27), y:84, 이름:'高一第一school期第十一次考试'}, {x:Date.UTC(1971, 1, 10), y:80, 이름:'高一第一school期第十two次考试'}, {x:Date.UTC(1971, 1, 18), y:80, 이름:'高一第一school期第十三次考试'}, {x:Date.UTC(1971, 1, 24), y:92, name:'高一第一school期第十四次考试'}, {x:Date.UTC(1971, 2, 4), y:49, 이름:'高一第一文期第十五次考试'}, {x:Date.UTC(1971, 2, 11) , y:79, 이름:'高一第一school期第十六次考试'}, {x:Date.UTC(1971, 2, 15), y:73, 이름:'高一第一school期第十七次考试'}, {x:Date.UTC(1971, 2, 25), y:61, 이름:'高一第一school期第十八次考试'}, {x :Date.UTC(1971, 3, 2), y:76, name:'高一第一school期第19次考试'}, {x:Date.UTC(1971, 3, 6), y: 82, 이름:'高一第一school期第20次考试'}, {x:Date.UTC(1971, 3, 13), y:84, 이름:'高一第一school期第21次考试'}, {x:Date.UTC(1971, 4, 3), y:10, 이름:'高一第一school期第22次考试'}, {x:Date.UTC(1971) , 4, 26), y:19, 이름:'高一第一school期第23次考试'}, {x:Date.UTC(1971, 5, 9), y:25, 이름:'高一第一school期第24次考试'}, {x:Date.UTC(1971, 5, 12), y:55, name:'高一第一school期第25次考试'} ] //,유형:'열' }, { 이름: '数school', 데이터: [ {'x':Date.UTC(1970, 9, 18) , 'y':45, '이름':'高一第一school期第1次考试'}, {x:Date.UTC(1970, 9, 27), y:29, 이름:'高一第一school期第2次考试'}, {x:Date.UTC(1970, 11, 1), y:47, name:'高一第一文期第3次考试'}, { x:Date.UTC(1970, 11, 11), y:55, 이름:'高一第一文期第4次考试'}, {x:Date.UTC(1970, 11, 25), y :38, 이름:'高一第一school期第5次考试'}, {x:Date.UTC(1971, 0, 8), y:38, 이름:'高一第一school期第6次考试'}, {x:Date.UTC(1971, 0, 15), y:38, name:'高一第一school期第7次考试'}, {x:Date.UTC( 1971, 1, 1), y:38, 이름:'高一第一文期第8次考试'}, {x:Date.UTC(1971, 1, 8), y:48, 이름:'高一第一school期第9次考试'}, {x:Date.UTC(1971, 1, 21), y:58 ,name:'高一第一school期第10次考试'}, {x:Date.UTC(1971, 2, 12), y:89, 이름:'高一第一school期第11次考试'}, {x:Date.UTC(1971, 2, 25) , y:70, 이름:'高一第一school期第12次考试'}, {x:Date.UTC(1971, 3, 4), y:94, 이름:'高一第一school期第13次考试'}, {x:Date.UTC(1971, 3, 9), y:91, name:'高一第一school期第14次考试'}, {x:Date.UTC(1971, 3, 13), y:75, name:'고등학교 1학기 제15회 시험'}, {x:Date.UTC(1971, 3 , 19), y:66 ,name:'고등학교 1학기 1학기 제16회 시험'}, {x:Date.UTC(1971, 4, 25), y:65 , name:'고등학교 1학기 첫 시험 1학기 제17회 시험'}, {x:Date.UTC(1971, 4, 31), y:35, name:'제18회 시험 고등학교 1학기'}, {x :Date.UTC(1971, 5, 7), y:56, name:'고등학교 1학기 제19회 시험'} ] }, { name: '중국어', data: [ {x:Date.UTC(1970, 9, 9), y: 0, name:'첫 번째 시험 고등학교 1학기'}, {x:Date.UTC (1970, 9, 14), y:15, name:'고등학교 1학기 2차 시험'}, {x :Date.UTC(1970, 10, 28), y:35, name: '고등학교 1학기 3차 시험'}, {x:Date.UTC(1970, 11, 12), y :46, name:'고등학교 1학기 4차 시험'}, {x:Date.UTC(1971, 0, 1), y:59, name:'1학기 5차 시험' of high school'}, {x:Date.UTC(1971, 0, 24 ), y:58, name:'고등학교 1학기 6차 시험'}, {x:Date .UTC(1971, 1, 1), y:62, name:'고등학교 1학기 7차 시험'}, {x:Date.UTC(1971, 1, 7), y:65, name:'고등학교 1학기 8차 시험'}, {x:Date .UTC(1971, 1, 23), y:77, name:'고등학교 1학기 9차 시험 '}, {x:Date.UTC(1971, 2, 8), y:77, name:'고등학교 1학기 10번째 시험'}, {x:Date.UTC( 1971, 2, 14), y:79, 이름:'고등학교 1학기 제11회 시험'} , {x:Date.UTC(1971, 2, 24), y:86, 이름: '고등학교 1학기 제12회 시험'}, {x:Date.UTC(1971, 3 , 4), y:80, name:'고등학교 1학기 제13회 시험' high school'}, {x:Date.UTC(1971, 3, 18), y:94, name:'고등학교 1학기 첫 시험 1학기 14기 시험'}, {x:Date.UTC(1971, 3, 24), y:98, name:'고등학교 1학기 제15회 시험'}, {x :Date.UTC(1971, 4, 16), y:39, name:'고등학교 1학기 제16회 시험'}, {x:Date.UTC(1971, 4, 21), y: 0, name:'제18회 시험 고등학교 1학기'}, ] }] })

Highcharts 매우 실용적인 Javascript 통계 차트 데모 example_javascript 기술

관련 기사