Highcharts の非常に実用的な Javascript 統計グラフのデモ example_JavaScript スキル

Highcharts 公式 Web サイト: http://www.highcharts.com Highcharts 公式 Web サイトの例: http://www.highcharts.com/demo/ Highcharts 公式 Web サイトのドキュメント: http://www.highcharts.com /documentation/ 使い方 公式 Web サイトのサンプルにさまざまなデモが記載されているので、必要に応じてドキュメントを参照してください。 以下は生徒の成績傾向のデモです:

コードをコピー 次のようなコード:

ハイチャートの例 $(function () { $('#container').highcharts({ chart: { type: 'spline' }, title: { text: '初三第一学期' }, 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; } /** このモードでは、2 つのポイントのツールチップが一緒に表示されます。 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; } * / }, series: [{ name: '英语', // すべてのシリーズに 1970/71 年のダミーの年 // を定義します。 // JavaScript では、月は 1 月は 0、2 月は 1 から始まることに注意してください。

data: [ {x:Date.UTC(1970) , 9, 27), y:55, name:'高一第一学期第一次考试'}, {x:Date.UTC(1970, 10, 10), y:60, name:'高一第一学期第二次考试'}, {x:Date.UTC(1970, 10, 18), y:70, name:'高一第一学期第三次考试'}, {x:Date.UTC(1970, 11, 2), y:80, name:'高一第一学期第四次考试'}, {x:Date.UTC(1970, 11, 9), y:60, name:'高一第一学期第五次考试'}, {x:Date.UTC(1970, 11, 16), y:60, 名前:'高一第一学期第六次考试'}, {x:Date.UTC(1970, 11, 28), y:67, name:'高一第一学期第七次考试'}, {x:Date.UTC (1971, 0, 1), y:81, 名前: '高一第一学期第八次考试'}, {x:Date.UTC(1971, 0, 8), y:78, 名前: '高一第一学期第九次考试'}, {x:Date.UTC(1971, 0, 12), y:98, name:'高一第一学期第十次考试'}, {x:Date.UTC(1971, 0, 27), y:84, name:'高一第一学期第十一次考试'}, {x:Date.UTC(1971, 1, 10)、y:80、名前:'高一第一学期第十二次考试'}、 {x:Date.UTC(1971, 1, 18), y:80, 名前:'高一第一学期第十三次考试'}, {x:Date.UTC(1971, 1, 24), y:92, name:'高一第一学期第十四次考试'}, {x:Date.UTC(1971, 2, 4), y:49, name:'高一第一学期第十五次考试'}, {x:Date.UTC(1971, 2, 11) 、y:79、名前:'高一第一学期第十六次考试'}、 {x:Date.UTC(1971, 2, 15), y:73, 名前:'高一第一学期第十七次考试'}, {x:Date.UTC(1971, 2, 25), y:61, name:'高一第一学期第十八次考试'}, {x :Date.UTC(1971, 3, 2), y:76, name:'高一第一学期第19次考试'}, {x:Date.UTC(1971, 3, 6), y: 82、名前:'高一第一学期第20次考试'}、 {x:Date.UTC(1971, 3, 13), y:84, 名前:'高一第一学期第21次考试'}, {x:Date.UTC(1971, 4, 3), y:10, name:'高一第一学期第22次考试'}, {x:Date.UTC(1971) , 4, 26), y:19, name:'高一第一学期第23次考试'}, {x:Date.UTC(1971, 5, 9), y:25, name:'高第 1 学期第 24 次考试'}, {x:Date.UTC(1971, 5, 12), y:55, name:'高一第一学期第 25 次考试'} ] //,type:'column' }, { name: '数学', data: [ {'x':Date.UTC(1970, 9, 18) , 'y':45, 'name':'高一第一学期第1次考察'}, {x:Date.UTC(1970, 9, 27), y:29, name:'高一第 1 学期第 2 次考试'}, {x:Date.UTC(1970, 11, 1), y:47, name:'高一第一学期第 3 次考试'}, { x:Date.UTC(1970, 11, 11), y:55, name:'高一第一学期第4次考试'}, {x:Date.UTC(1970, 11, 25), y :38, name:'高一第一学期第5次考察'}, {x:Date.UTC(1971, 0, 8), y:38, 名前:'高一第一学期第6次考试'}, {x:Date.UTC(1971, 0, 15), y:38, name:'高一第一学期第7次考试'}, {x:Date.UTC( 1971, 1, 1), y:38, name:'高一第一学期第8次考试'}, {x:Date.UTC(1971, 1, 8), y:48, name:'高一第一学期第9次考试'}, {x:Date.UTC(1971, 1, 21), y:58 ,name:'高一第一学期第10次考试'}, {x:Date.UTC(1971, 2, 12), y:89, name:'高一第一学期第11次考试'}, {x:Date.UTC(1971, 2, 25) 、y:70、名前:'高一第一学期第12次考试'}、 {x:Date.UTC(1971, 3, 4), y:94, 名前:'高一第一学期第13次考试'}, {x:Date.UTC(1971, 3, 9), y:91, name:'高一第一学期第14次考试'}, {x:Date.UTC(1971, 3, 13), y:75, name:'高校1学期第15回試験'}, {x:Date.UTC(1971, 3 , 19), y:66 ,name:'高校1学期第16回試験'}, {x:Date.UTC(1971, 4, 25), y:65 , name:'高校1学期第1回試験 第17回試験'}, {x:Date.UTC(1971, 4, 31), y:35, name:'第18回試験高校一学期の試験'}, {x :Date.UTC(1971, 5, 7), y:56, name:'高校一学期の第19回試験'} ] }, { name: '中国語', data: [ {x:Date.UTC(1970, 9, 9), y: 0, name:'高校一学期'}, {x:Date.UTC (1970, 9, 14), y:15, name:'高校一学期の二次試験'}, {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回試験高校'}, {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, name:'高校1学期 第11回試験'} , {x:Date.UTC(1971, 2, 24), y:86, name: '高校1学期第12回試験'}, {x:Date.UTC(1971, 3 , 4), y:80, name:'高校1学期第13回試験高校'}, {x:Date.UTC(1971, 3, 18), y:94, name:'高校1学期第1回試験 1学期第14回試験'}, {x:Date.UTC(1971, 3, 24), y:98, name:'高校1学期第15回試験'}, {x :Date.UTC(1971, 4, 16), y:39, name:'第16回高校1学期試験'}, {x:Date.UTC(1971, 4, 21), y: 0, name:'第18回試験高校一学期'}, ] }) });

;

Highcharts の非常に実用的な Javascript 統計グラフのデモ example_JavaScript スキル

関連記事