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

この記事の例では、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 プログラミングに役立つことを願っています。

関連ラベル：

jquery 折れ線グラフ 方法

ソース：php.cn

前の記事：EasyUI_jqueryのコンボボックスのデフォルト値に関する注意事項 次の記事：js_javascriptスキルにおける分割と置換の使用例

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事

• NullPointerException とは何ですか?どのように修正すればよいですか?
  2024-10-22 09:46:29
• 初心者からプログラマーへ: 旅は C の基礎から始まります
  2024-10-13 13:53:41
• PHP による Web 開発のロックを解除する: 初心者ガイド
  2024-10-12 12:15:51
• C の謎を解く: 新人プログラマーのための明確でシンプルな道
  2024-10-11 22:47:31
• コーディングの可能性を解き放つ: まったくの初心者のための C プログラミング
  2024-10-11 19:36:51
• 内なるプログラマーを解き放つ: まったくの初心者のための C
  2024-10-11 15:50:41
• C で生活を自動化する: 初心者向けのスクリプトとツール
  2024-10-11 15:07:41
• PHP を簡単に: Web 開発の最初のステップ
  2024-10-11 14:21:21
• Python で何でも構築: 創造性を解き放つための初心者ガイド
  2024-10-11 12:59:11
• コーディングの鍵: 初心者のための Python の力を解き放つ
  2024-10-11 12:17:31

最新の問題

Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...

から 2024-04-06 14:54:03

0

2

421

jqueryを使用してHTMLデータテーブルの選択されていない行の値を取得する方法 ボタンがクリックされなかったすべての行の値を取得しようとしています。たとえば、最初の行のボタンをクリックしたときに、クリックされなかった行の値を取得したいとします。 vartabl...

から 2024-04-05 09:26:49

0

1

1418

エンドユーザーの現在の選択に基づいて選択ボックスから選択したオプションを移動するには、jquery スクリプトが必要です エンドユーザーが選択ボックス要素を介してアイテムをランク付けできる HTML ページがあります。簡単なデモを確認するには、フィドルを参照してください: https://jsfidd...

から 2024-04-04 18:40:04

0

1

3528

ブックマークを介して純粋な CSS で要素を作成しました。作成されたが表示されない 私のコードは次のとおりです: g=document.createElement('div');g.setAttribute("id","divcont...

から 2024-04-04 17:27:27

0

1

417

Safari/Firefox iOS でフォ​​ームデータを送信できない これは、iOS 上の Safari/Firefox を除くすべてのプラットフォームで動作します: jQuery("#gform_1").one('submit'...

から 2024-04-04 12:53:48

0

1

303

関連トピック

詳細>

• jqueryプラグインとは何ですか?
• jQueryでJSONを操作する方法
• jqueryで要素を削除する方法
• jQueryのhover()メソッドの使用
• jqueryはページングメソッドを実装します
• jqueryの隠し要素とは何ですか
• jQueryでハイライト表示されているもの
• Appleが200を超えるファイルをダウンロードできない問題を解決する方法