jQuery_jqueryを使用して折れ線グラフを実装する方法-jsチュートリアル-php.cn

jQuery_jqueryを使用して折れ線グラフを実装する方法

WBOY

リリース： 2016-05-16 16:11:59

オリジナル

2009 人が閲覧しました

この記事の例では、jQuery を使用して折れ線グラフを実装する方法を説明します。皆さんの参考に共有してください。詳細は以下の通りです。

レンダリングは次のとおりです:

js リファレンス:

コードをコピーしますコードは次のとおりです:

定期的に更新:

コードをコピーコードは次のとおりです:

//グラフ 

arチャート

$(document).ready(function() { 

chart = new Highcharts.Chart({ 

チャート: { 

Renderto: 'Divchart', // チャートのコンテナを配置します 

プロット背景色: null、

プロットボーダー幅: null、

defaultSeriesType: 'line' 

}、

タイトル: { 

テキスト: '24 時間負荷曲線' 

}、

サブタイトル: {
テキスト: ''

}、

xAxis: {//X 軸データ 

カテゴリ: ['00','01', '02','03', '04','05', '06','07', '08','09', '10','11' 、「12」、「13」、「14」、「15」、「16」、「17」、「18」、「19」、「20」、「21」、「22」、「23」]、 

ラベル: { 

回転: -45, //フォントの傾き 

整列: '右'、

スタイル: { フォント: 'normal 12px 宋体' } 

}、

yAxis: {//Y 軸の表示テキスト 

タイトル: { 

テキスト: 'MW'
                                                                                                   
}、

ツールチップ: { 

有効: true、
フォーマッタ: function() { 

return '' this.x '
' this.series.name ': ' Highcharts.numberFormat(this.y, 1);
                                                                                                   
}、

プロットオプション: { 

行: { 

データラベル: { 

有効: true
                                                                                                                                 
EnableMouSettracking: True // タイトル 
 かどうか
                                                                                                   
}、

シリーズ: [{ 

名前: 'ユニット 1'、

データ: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 ]

}、{ 

名前: 'ユニット 2'、

データ: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0 ]
         }] 

         });  

         関数 getForm(){ 

             $.ajax({ 

                 type: "POST", //要投稿方式 

                 URL: "WebServiceFH.asmx/GetLoadEveryHourByOne"、 

                 contentType: "application/json", 

                 データ: {}、

                 データ型: "json"、

                 成功: 関数 (データ) { 

                     var data = [data["Load0"]、data["Load1"]、data["Load2"]、data["Load3"]、data["Load4"]、data["Load5"]、data["Load6 "]、データ["ロード7"]、データ["ロード8"]、データ["ロード9"]、データ["ロード10"]、データ["ロード11"]、データ["ロード12"]、データ["ロード13" ]、データ["ロード14"]、データ["ロード15"]、データ["ロード16"]、データ["ロード17"]、データ["ロード18"]、データ["ロード19"]、データ["ロード20"] ,data["Load21"],data["Load22"],data["Load23"]];   

                     chart.series[0].setData(データ);   

                 }、

                 エラー: 関数 (エラー) { 

                     alert("读取数据出错！");  

                 } 

             });    

             $.ajax({ 

                 type: "POST", //要投稿方式 

                 URL: "WebServiceFH.asmx/GetLoadEveryHourByTwo"、 

                 contentType: "application/json"、 

                 データ型: "json"、

                 成功: 関数 (データ) { 

                     var data = [data["Load0"]、data["Load1"]、data["Load2"]、data["Load3"]、data["Load4"]、data["Load5"]、data["Load6 "]、データ["ロード7"]、データ["ロード8"]、データ["ロード9"]、データ["ロード10"]、データ["ロード11"]、データ["ロード12"]、データ["ロード13" ]、データ["ロード14"]、データ["ロード15"]、データ["ロード16"]、データ["ロード17"]、データ["ロード18"]、データ["ロード19"]、データ["ロード20"] ,data["Load21"],data["Load22"],data["Load23"]];   

                     chart.series[1].setData(データ);     

                 }、

                 エラー: 関数 (エラー) { 

                     alert("读取数据出错！");  

                 } 

             });   

         } 

         $(document).ready(function() { 
// チャートのリアルタイム更新を実現するために、3 秒ごとにメソッドを自動的に呼び出します 

getForm();
window.setInterval(getForm,600000);
});

});

ここに注意してください:

コードをコピーコードは次のとおりです:var data = [data["Load0"],data["Load1 "]、データ["ロード2"]、データ["ロード3"]、データ["ロード4"]、データ["ロード5"]、データ["ロード6"]、データ["ロード7"]、データ["ロード8" ]、データ["ロード9"]、データ["ロード10"]、データ["ロード11"]、データ["ロード12"]、データ["ロード13"]、データ["ロード14"]、データ["ロード15"] ,データ["ロード16"]、データ["ロード17"]、データ["ロード18"]、データ["ロード19"]、データ["ロード20"]、データ["ロード21"]、データ["ロード22"]、データ[" Load23"]]; chart.series[0].setData(data);

本文でのみ必須:

コードをコピーしますコードは次のとおりです。

この記事が皆さんの jQuery プログラミングに役立つことを願っています。 