おかしいよな、PHPでやり方を発信するはずがJavaScriptを使用なんて。
グラフ表示には 調べた結果Highchartsというのがよさそう
↓
でもJavaScriptで書く必要がある
↓
PHPのデータで保存したファイルをJavaScriptで逐次読もうと考えたけど難しそう
↓
PHPあきらめて JavaScriptでやり始める
↓
Firefoxにできたhtmlファイルを突っ込んで確かめていたけど、途中でChromeを右クリックの「検証」でブレークとかエラー表示が見えることに気付く
↓
グラフの見栄え・気になる所をいろいろいじったらすごい時間をかかるのである程度妥協する
↓
そして、出来上がったのがこれ
HighchartsとJavaScriptを無勉から、勘で作り上げました。
Highchartsのこちらをベースにしています。
仕様は
・20点のデータ
・2秒間隔で取得
・高評価と低評価。チャンネル登録者数を表示
・最新値が見えるようにする
右が最新のデータで、左が過去データで流れていきます。
これがコードです。このhtmlをChromeやFirefoxに放り込んでみてください。古いIEでは動きません。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 | <!DOCTYPE html><html lang = "ja"> <head> <meta charset = "utf-8"> <title>Live data</title><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><script src="https://code.highcharts.com/highcharts.js"></script><script src="https://code.highcharts.com/modules/exporting.js"></script> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> </head> <body> <script>var input_y0=0,input_y1=0,input_y2=0;var key = "①";var videoId = "②";//今回はvideoIdを入力var channelId="";//こっちは空欄でOK function requestvideo() { return $.ajax({ type: 'GET', url: 'https://www.googleapis.com/youtube/v3/videos?part=statistics,snippet,liveStreamingDetails&id=' + videoId + '&key=' + key, dataType: 'json', async: false,//同期処理にする error: function() { //error func $('#yt-list').append('<li>Youtubeのデータが取得できませんでした。<\/li>'); } }).done(function (jsondataYt) { channelId = jsondataYt.items[0].snippet.channelId; input_y0 = parseFloat(jsondataYt.items[0].statistics.likeCount); input_y1 = parseFloat(jsondataYt.items[0].statistics.dislikeCount); }); } function requestchannel() { return $.ajax({ type: 'GET', url: 'https://www.googleapis.com/youtube/v3/channels?part=statistics&id=' + channelId + '&key=' + key, dataType: 'json', async: false,//同期処理にする error: function() { //error func $('#yt-list').append('<li>Youtubeのデータが取得できませんでした。<\/li>'); } }).done(function (jsondataYt) { input_y2 = parseInt(jsondataYt.items[0].statistics.subscriberCount); }); } Highcharts.setOptions({ global: { useUTC: false }, lang: { numericSymbols: null//軸のkキロ表示をやめる }});Highcharts.chart('container', { chart: { type: 'spline', animation: Highcharts.svg, // don't animate in old IE marginRight: 100,//右の軸が隠れるので適切な値にする events: { load: function () { // set up the updating of the chart each second var series0 = this.series[0]; var series1 = this.series[1]; var series2 = this.series[2]; setInterval(function () { var x = (new Date()).getTime(); // current time requestvideo();//YouTubeAPI ビデオ側 requestchannel();///YouTubeAPI チャンネル側 series0.addPoint([x, input_y0], true, true); series1.addPoint([x, input_y1], true, true); series2.addPoint([x, input_y2], true, true); series0.update({name: '高評価:'+input_y0}); series1.update({name: '低評価:'+input_y1}); series2.update({name: '登録者数:'+input_y2}); }, 2000);//2秒のインターバルタイマ } } }, title: { text: 'Live data' }, xAxis: { type: 'datetime', tickPixelInterval: 150 }, yAxis: [ { // 1つ目のy軸設定 title: { text: '評価' }, plotLines: [{ value: 0, width: 1, color: '#FF8080' }], allowDecimals: false //軸を整数表示 }, { // 2つ目のy軸設定 title: { text: '登録者数' }, allowDecimals: false, //軸を整数表示 opposite: true // trueの場合グラフの右側にy軸を配置する } ], tooltip: { formatter: function () { return '<b>' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + this.y; } }, legend: { enabled: true //凡例表示 }, exporting: { enabled: false }, series: [{ name: '高評価', yAxis: 0, data: (function () { var data = [], time = (new Date()).getTime(), i; for (i = -19; i <= 0; i += 1) { data.push({ x: time + i * 1000, y: null }); } return data; }()) }, { name: '低評価', yAxis: 0, data: (function () { var data = [], time = (new Date()).getTime(), i; for (i = -19; i <= 0; i += 1) { data.push({ x: time + i * 1000, y: null }); } return data; }()) }, { name: '登録者数', yAxis: 1, data: (function () { var data = [], time = (new Date()).getTime(), i; for (i = -19; i <= 0; i += 1) { data.push({ x: time + i * 1000, y: null }); } return data; }()) } ]});</script> </body></html> |
注釈として
なんか上のコードの色が変ですがあきらめました。
Highchartsは、ダウンロードしても使えるみたいですがしなくてもできるらしいです。今回はダウンロードなしで使用しています。
16と17行目はPHPと使い方は同様です。APIキーと動画IDいれてください。
APIの使いかたはPHPと同じようなものです。URL作って投げて、レスポンスを使用する形は変わりません。
25行目と43行目については、PHPと違いJavascriptだとレスポンスが返るまでまたず処理が進んでしまう、雑な対策としてこの行追加でレスポンスが返るまで待ち状態となります。これでPHPと同じ感じに動作します。
62行目 Y軸が1000を1kとかの表示するのを禁止します。
71行目 第２のY軸を右に置こうとしたら表示されないので苦労しました。原因は画面の外に表示されていました。この値を増加したら解決。これで1時間は無駄にしました。
80行目は2秒周期インターバル動作させています。
85行目あたりaddPointのtrueとかすることによってシフト動作してくれます
88行目 汎用に最新値表示しています。最新の値をプロット上に出したかったのですがdataの要素の最後だけlabel表示をenableにしてもシフト動作すると前の要素に移動していってしまうのでaddPointを使わずfor文なりで更新するのがよさそう？メンドクサイのであきらめました。
112行目と118行目でY軸が整数表示
119行目で二つ目のY軸を右側に置きます
136行目でどちらのY軸に表示するか決まります
142行目等のi=-19でデータの点数を20点してます。-199にすれば200点になります。
なんとかやりきった。疲れた。
0 件のコメント:
コメントを投稿