いつもありがとうございます。
Anychart.jsで気象のダッシュボードを作成するために、下記のサンプルのダッシュボードをストリームにするテストをしているのですが、
http://www.anychart.com/products/anychart/gallery/Linear_Gauges/Weather_Dashboard.php
AnychartのData streamが応用出来ず、
https://docs.anychart.com/7.3.1/Working_with_Data/Data_Manipulation
push.jsを使って、左の温度計の温度をデータと連動してみたのですが、データは読んだものの、そのままスクリプト全体をfunctionに入れてしまったせいで画面がループしてしまい、上書きされません。修正点、別の方法等をアドバイスしていただければと思い投稿しました。どうぞよろしくお願いします。
html
1<html> 2 <head> 3 <meta charset="UTF-8"> 4 <script src="https://cdn.anychart.com/js/7.14.0/anychart-bundle.min.js"></script> 5 <link rel="stylesheet" href="https://cdn.anychart.com/css/latest/anychart-ui.min.css" /> 6 <title>Weather Dashboard</title> 7 <style> 8html, body, #container { 9 width: 100%; 10 height: 100%; 11 margin: 0; 12 padding: 0; 13} 14</style> 15 </head> 16 <body> 17<div id="container"></div> 18 19<!-- Java Script --> 20<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 21<script type="text/javascript" src="./js/push.js"></script> 22<script type="text/javascript"> 23$(function() { 24 25 // content のサイズを取得しておく 26 var width = parseInt($('#container').css('width')); 27 28 // オブジェクトを生成 29 var push = new Push('./push.php'); 30 31 // 更新時の処理を登録 32 push.onUpdate = function(json){ 33 // 下のscriptを挿入 34 // Create table to place gauges and information 35 layoutTable = anychart.standalones.table(4, 3); 36 layoutTable.hAlign('center') 37 .vAlign('middle') 38 .useHtml(true) 39 .fontSize(16) 40 .cellBorder(null); 41//-----------------------------略------------------------------------ 42 43 44 return gauge 45 } 46 }; 47 48 // 終了時の処理を登録 49 push.onSuccess = function(){ 50 console.log('finished'); 51 }; 52 53 // エラー時の処理を登録 54 push.onError = function(){ 55 console.log('error occured'); 56 57 // 再起動 58 location.reload(); 59 }; 60 61 62 // 受信開始 63 push.start(); 64 65}); 66</script> 67<script type="text/javascript"> 68 // サンプルのスクリプト 69anychart.onDocumentReady(function () { 70 // Create table to place gauges and information 71 layoutTable = anychart.standalones.table(4, 3); 72 layoutTable.hAlign('center') 73 .vAlign('middle') 74 .useHtml(true) 75 .fontSize(16) 76 .cellBorder(null); 77 78 // Set height and width for some cols and rows for layout table 79 layoutTable.getCol(2).width('50%'); 80 layoutTable.getRow(0) 81 .height(60) 82 .fontSize(18); 83 layoutTable.getRow(1).height(60); 84 layoutTable.getRow(3) 85 .height(60) 86 .fontSize(14) 87 .vAlign('top'); 88 89 90 91 //-----------------------------略------------------------------------ 92 return gauge 93 } 94}); 95 96 </script> 97</body> 98</html> 99 100
JS
1/** 2 * push.js 3 4 */ 5var Push = (function ($) { 6 7 // Constructor 8 function Push(url) { 9 this.url = url; 10 } 11 12 /** 13 * 引数のテキストが JSON かどうか 判別する内部関数 14 */ 15 var isJSON = function (arg) { 16 arg = (typeof arg === "function") ? arg() : arg; 17 if (typeof arg !== "string") { 18 return false; 19 } 20 try { 21 arg = (!JSON) ? eval("(" + arg + ")") : JSON.parse(arg); 22 return true; 23 } catch (e) { 24 return false; 25 } 26 }; 27 28 /** 29 * データ更新時に呼ばれるイベントハンドラ 30 */ 31 Push.prototype.onUpdate = function (json) { 32 console.log('update'); 33 } 34 35 /** 36 * 通信正常終了時に呼ばれるイベントハンドラ 37 */ 38 Push.prototype.onSuccess = function () { 39 console.log('success'); 40 } 41 42 /** 43 * 通信異常終了時に呼ばれるイベントハンドラ 44 */ 45 Push.prototype.onError = function () { 46 console.log('error'); 47 } 48 49 /** 50 * 通信を開始するメソッド 51 */ 52 Push.prototype.start = function () { 53 var mytimer = null; 54 55 var push = this; 56 57 $.ajax({ 58 type: 'get', 59 url: this.url, 60 cache: false, 61 xhrFields: { 62 onloadstart: function () { 63 var xhr = this; 64 //console.log('start'); 65 66 // 前回取得したデータの文字数 67 var textlength = 0; 68 69 // データが来るまで待つ 70 mytimer = setInterval(function () { 71 72 // 受信済みテキストを保存 73 var text = xhr.responseText; 74 75 // 前回の取得からの差分を取得 76 var newText = text.substring(textlength); 77 78 // JSONデータを取得 79 var lines = newText.split("\n"); 80 81 if (text.length > textlength) { 82 // 長さを更新 83 textlength = text.length; 84 85 lines.forEach(function (line) { 86 if (isJSON(line)) { 87 // 正常な JSON データの時 88 var json = JSON.parse(line); 89 90 // 更新 91 if (push.onUpdate) { 92 push.onUpdate(json); 93 } 94 } 95 }); 96 } 97 98 }, 100); 99 } 100 }, 101 success: function () { 102 //console.log('finished!'); 103 104 if (push.onSuccess) { 105 push.onSuccess(); 106 } 107 108 // 一秒後にタイマー停止 109 setTimeout(function () { 110 clearInterval(mytimer); 111 }, 1000); 112 }, 113 error: function (XMLHttpRequest, textStatus, errorThrown) { 114 //$("#XMLHttpRequest").html("XMLHttpRequest : " + XMLHttpRequest.status); 115 //$("#textStatus").html("textStatus : " + textStatus); 116 //$("#errorThrown").html("errorThrown : " + errorThrown.message); 117 118 if (push.onError) { 119 push.onError(); 120 } 121 122 // タイマー停止 123 clearInterval(mytimer); 124 } 125 }); 126 127 } 128 129 return Push; 130 131})(jQuery);
php
1<?php 2// push.php 3 4function output_chunk( $chunk ) { 5 echo sprintf( "%x\r\n", strlen( $chunk ) ); 6 echo $chunk . "\r\n"; 7} 8 9/** 10 * Ajaxによるリクエストかどうか 11 * 12 * @return boolean True or False 13 */ 14function isAjax() { 15 if ( isset( $_SERVER[ 'HTTP_X_REQUESTED_WITH' ] ) && strtolower( $_SERVER[ 'HTTP_X_REQUESTED_WITH' ] ) == 'xmlhttprequest' ) { 16 return true; 17 } 18 return false; 19} 20 21 22if ( isAjax() ) { 23 // Ajax のアクセスのみ受け付ける 24 25 header( "Content-type: application/octet-stream" ); 26 header( "Transfer-encoding: chunked" ); 27 ob_flush(); 28 flush(); 29 30 $i = 0; 31 while ( !connection_aborted() ) { 32 // クライアントからの接続が続いている間繰り返す 33 34 // ファイルを読み込み専用でオープンする 35 $fp = fopen( 'ondo.txt', 'r' ); 36 // ファイルから一行読み込む 37 $line = fgets( $fp ); 38 39 // ファイルをクローズする 40 fclose( $fp ); 41 42 // JSON に入れるデータ 43 $id = $line; 44 $message = "hoge" . $i; 45 $createdAt = date( "Y-m-d H:i:s" ); 46 47 // JSON データを作る 48 $json = json_encode( 49 array( 50 "id" => $id, 51 "message" => $message, 52 "createdAt" => $createdAt 53 ) 54 ); 55 56 // データを掃き出す 57 output_chunk( 58 $json . str_repeat( ' ', 8000 ) . "\n" 59 ); 60 ob_flush(); 61 flush(); 62 63 // 一秒停止 64 sleep( 1 ); // 一秒ごとに生成 65 66 $i++; 67 } 68 echo "0\r\n\r\n"; 69} else { 70 // Ajax アクセス以外はトップページへ誘導 71 header( "Location: http://" . $_SERVER[ "SERVER_NAME" ] . "/" ); 72 73}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。