機動戦士ガンダムオンライン超攻略 Wiki
[
ホーム
|
リロード
|
新規
]
サイト内検索
:
[
差分チェッカー
]
[
アップローダー
]
【楽天スーパーDEAL】毎日更新・最大50%ポイントバック!!(広告)
Tweet
ログイングラフ作成ツール
をテンプレートにして作成
開始行:
ツールっていってもhtmlだけど
<2016/12/07 6:25 追記>
こっちに移動
[[http://www.geocities.jp/hiro_ot_to_hiro/GO_IN.html>http...
<2016/12/07 3:33 修正>
ログイン数を設定するところで桁調整のための先頭0を入れると...
<ここから下をコピペ>
#aa{{
<html>
<head>
<meta charset="UTF-8">
<title>ログイングラフ</title>
<script>
device_data = [
{date:'10/23', In: 6464, color:0, mday:0},
{date:'10/24', In: 6850, color:1, mday:0},
{date:'10/25', In: 6749, color:1, mday:0},
{date:'10/26', In: 8533, color:1, mday:1},
{date:'10/27', In: 8382, color:1, mday:0},
{date:'10/28', In: 8458, color:1, mday:0},
{date:'10/29', In: 8350, color:2, mday:0},
{date:'10/30', In: 7733, color:0, mday:0},
{date:'10/31', In: 7964, color:1, mday:0},
{date:'11/01', In: 8112, color:1, mday:0},
{date:'11/02', In: 8405, color:1, mday:1},
{date:'11/03', In: 7457, color:1, mday:0},
{date:'11/04', In: 8253, color:1, mday:0},
{date:'11/05', In: 8273, color:2, mday:0},
{date:'11/06', In: 7528, color:0, mday:0},
{date:'11/07', In: 7924, color:1, mday:0},
{date:'11/08', In: 8641, color:1, mday:0},
{date:'11/09', In:14245, color:1, mday:1},
{date:'11/10', In:11382, color:1, mday:0},
{date:'11/11', In:11402, color:1, mday:0},
{date:'11/12', In:10902, color:2, mday:0},
{date:'11/13', In: 9697, color:0, mday:0},
{date:'11/14', In: 9813, color:1, mday:0},
{date:'11/15', In: 9746, color:1, mday:0},
{date:'11/16', In:10357, color:1, mday:1},
{date:'11/17', In: 9669, color:1, mday:0},
{date:'11/18', In: 9924, color:1, mday:0},
{date:'11/19', In: 9774, color:2, mday:0},
{date:'11/20', In: 8853, color:0, mday:0},
{date:'11/21', In: 8811, color:1, mday:0},
{date:'11/22', In: 9163, color:1, mday:0},
{date:'11/23', In: 8489, color:0, mday:0},
{date:'11/24', In:10120, color:1, mday:1},
{date:'11/25', In: 9806, color:1, mday:0},
{date:'11/26', In: 9946, color:2, mday:0},
{date:'11/27', In: 9208, color:0, mday:0},
{date:'11/28', In: 9075, color:1, mday:0},
{date:'11/29', In: 8935, color:1, mday:0},
{date:'11/30', In: 9873, color:1, mday:1},
{date:'12/01', In: 8841, color:1, mday:0},
{date:'12/02', In: 9330, color:1, mday:0},
{date:'12/03', In: 9453, color:2, mday:0},
{date:'12/04', In: 8542, color:0, mday:0},
{date:'12/05', In: 8918, color:1, mday:0},
{date:'12/06', In: 9000, color:1, mday:0},
{date:'12/07', In: 0000, color:1, mday:1},
{date:'12/08', In: 0000, color:1, mday:0},
{date:'12/09', In: 0000, color:1, mday:0},
{date:'12/10', In: 0000, color:2, mday:0},
];
window.addEventListener('load', function(event){ draw...
//グラフ描画
function drawGraph(){
var cvs = document.querySelector('canvas');
var context = cvs.getContext('2d');
context.fillStyle = 'black';
var maxdata = device_data[0].In;
var mindata = device_data[0].In;
var datacount = 0;
for (var i = 1; i < (device_data.length); i++) {
if ( device_data[i].In > 0) {
datacount++;
if ( device_data[i].In > maxdata) {
maxdata = device_data[i].In;
}
if ( device_data[i].In < mindata) {
mindata = device_data[i].In;
}
}
}
var x0 = 1280;
var x1 = 50;
var x2 = 50;
var x3 = 50;
var x4 = 50;
//var add = (x0 - x1 - x2 - x3 - x4) / (device_data...
var add = (x0 - x1 - x2 - x3 - x4) / datacount;
var y0 = 800;
var y1 = 50;
var y2 = 50;
var y3 = 50;
var y4 = 50;
cvs.width = x0;
cvs.height = y0;
var scaleY = (y0 - y1 - y2 - y3 - y4) / (maxdata - ...
var hoge = -1;
if ( hoge < 1) {
context.translate(0, y0);
}
//背景塗りつぶし
context.beginPath();
context.fillStyle = 'white';
context.fillRect(0, 0, x0, y0 * hoge);
context.stroke();
//グラフ1
context.beginPath();
context.strokeStyle = 'orange';
context.lineWidth = 1;
for (var i = 0; i < (datacount + 1); i++) {
context.moveTo( x1 + x2 + i * add , (cvs.height...
context.lineTo( x1 + x2 + i * add , ( ...
}
context.stroke();
//グラフ2
context.beginPath();
context.strokeStyle = 'darkorange';
context.lineWidth = 2;
context.moveTo( x1 , (cvs.height - y4 )...
context.lineTo( x1 , ( y1 )...
context.lineTo( cvs.width - x3 , ( y1 )...
context.stroke();
var nextpointX = x1 + x2;
var nextpointY = ((device_data[0].In - mindata ) * ...
//データ
context.beginPath();
context.strokeStyle = 'teal';
context.lineWidth = 2;
context.moveTo( nextpointX , nextpointY );
for (var i = 1; i < (device_data.length); i++) {
if ( device_data[i].In > 0) {
nextpointX = nextpointX + add;
nextpointY = ((device_data[i].In - mindata ...
context.lineTo(nextpointX, nextpointY );
}
}
context.stroke();
//縦軸メモリ
context.beginPath();
context.fillStyle = 'black';
context.textAlign = 'right';
context.fillText(mindata, x1 - 5, ((mindata - minda...
context.fillText(maxdata, x1 - 5, ((maxdata - minda...
context.stroke();
//横軸メモリ
context.beginPath();
context.fillStyle = 'black';
//context.rotate( 45 * Math.PI / 180 );
//context.textAlign = 'right';
context.textAlign = 'center';
for (var i = 0; i < datacount+1; i++) {
if (device_data[i].mday > 0) {
if(device_data[i].color == 0){
context.fillStyle = 'red';
}
if(device_data[i].color == 1){
context.fillStyle = 'green';
}
if(device_data[i].color == 2){
context.fillStyle = 'blue';
}
//context.fillStyle = date_style[device_dat...
context.fillText(device_data[i].date, (x1 +...
}
}
context.stroke();
}
</script>
</head>
<body>
<section>
<h1></h1>
<canvas>
canvas要素が利用できるWebブラウザで開いてください。
</canvas>
</section>
</body>
</html>
}}
<ここから上をコピペ>
終了行:
ツールっていってもhtmlだけど
<2016/12/07 6:25 追記>
こっちに移動
[[http://www.geocities.jp/hiro_ot_to_hiro/GO_IN.html>http...
<2016/12/07 3:33 修正>
ログイン数を設定するところで桁調整のための先頭0を入れると...
<ここから下をコピペ>
#aa{{
<html>
<head>
<meta charset="UTF-8">
<title>ログイングラフ</title>
<script>
device_data = [
{date:'10/23', In: 6464, color:0, mday:0},
{date:'10/24', In: 6850, color:1, mday:0},
{date:'10/25', In: 6749, color:1, mday:0},
{date:'10/26', In: 8533, color:1, mday:1},
{date:'10/27', In: 8382, color:1, mday:0},
{date:'10/28', In: 8458, color:1, mday:0},
{date:'10/29', In: 8350, color:2, mday:0},
{date:'10/30', In: 7733, color:0, mday:0},
{date:'10/31', In: 7964, color:1, mday:0},
{date:'11/01', In: 8112, color:1, mday:0},
{date:'11/02', In: 8405, color:1, mday:1},
{date:'11/03', In: 7457, color:1, mday:0},
{date:'11/04', In: 8253, color:1, mday:0},
{date:'11/05', In: 8273, color:2, mday:0},
{date:'11/06', In: 7528, color:0, mday:0},
{date:'11/07', In: 7924, color:1, mday:0},
{date:'11/08', In: 8641, color:1, mday:0},
{date:'11/09', In:14245, color:1, mday:1},
{date:'11/10', In:11382, color:1, mday:0},
{date:'11/11', In:11402, color:1, mday:0},
{date:'11/12', In:10902, color:2, mday:0},
{date:'11/13', In: 9697, color:0, mday:0},
{date:'11/14', In: 9813, color:1, mday:0},
{date:'11/15', In: 9746, color:1, mday:0},
{date:'11/16', In:10357, color:1, mday:1},
{date:'11/17', In: 9669, color:1, mday:0},
{date:'11/18', In: 9924, color:1, mday:0},
{date:'11/19', In: 9774, color:2, mday:0},
{date:'11/20', In: 8853, color:0, mday:0},
{date:'11/21', In: 8811, color:1, mday:0},
{date:'11/22', In: 9163, color:1, mday:0},
{date:'11/23', In: 8489, color:0, mday:0},
{date:'11/24', In:10120, color:1, mday:1},
{date:'11/25', In: 9806, color:1, mday:0},
{date:'11/26', In: 9946, color:2, mday:0},
{date:'11/27', In: 9208, color:0, mday:0},
{date:'11/28', In: 9075, color:1, mday:0},
{date:'11/29', In: 8935, color:1, mday:0},
{date:'11/30', In: 9873, color:1, mday:1},
{date:'12/01', In: 8841, color:1, mday:0},
{date:'12/02', In: 9330, color:1, mday:0},
{date:'12/03', In: 9453, color:2, mday:0},
{date:'12/04', In: 8542, color:0, mday:0},
{date:'12/05', In: 8918, color:1, mday:0},
{date:'12/06', In: 9000, color:1, mday:0},
{date:'12/07', In: 0000, color:1, mday:1},
{date:'12/08', In: 0000, color:1, mday:0},
{date:'12/09', In: 0000, color:1, mday:0},
{date:'12/10', In: 0000, color:2, mday:0},
];
window.addEventListener('load', function(event){ draw...
//グラフ描画
function drawGraph(){
var cvs = document.querySelector('canvas');
var context = cvs.getContext('2d');
context.fillStyle = 'black';
var maxdata = device_data[0].In;
var mindata = device_data[0].In;
var datacount = 0;
for (var i = 1; i < (device_data.length); i++) {
if ( device_data[i].In > 0) {
datacount++;
if ( device_data[i].In > maxdata) {
maxdata = device_data[i].In;
}
if ( device_data[i].In < mindata) {
mindata = device_data[i].In;
}
}
}
var x0 = 1280;
var x1 = 50;
var x2 = 50;
var x3 = 50;
var x4 = 50;
//var add = (x0 - x1 - x2 - x3 - x4) / (device_data...
var add = (x0 - x1 - x2 - x3 - x4) / datacount;
var y0 = 800;
var y1 = 50;
var y2 = 50;
var y3 = 50;
var y4 = 50;
cvs.width = x0;
cvs.height = y0;
var scaleY = (y0 - y1 - y2 - y3 - y4) / (maxdata - ...
var hoge = -1;
if ( hoge < 1) {
context.translate(0, y0);
}
//背景塗りつぶし
context.beginPath();
context.fillStyle = 'white';
context.fillRect(0, 0, x0, y0 * hoge);
context.stroke();
//グラフ1
context.beginPath();
context.strokeStyle = 'orange';
context.lineWidth = 1;
for (var i = 0; i < (datacount + 1); i++) {
context.moveTo( x1 + x2 + i * add , (cvs.height...
context.lineTo( x1 + x2 + i * add , ( ...
}
context.stroke();
//グラフ2
context.beginPath();
context.strokeStyle = 'darkorange';
context.lineWidth = 2;
context.moveTo( x1 , (cvs.height - y4 )...
context.lineTo( x1 , ( y1 )...
context.lineTo( cvs.width - x3 , ( y1 )...
context.stroke();
var nextpointX = x1 + x2;
var nextpointY = ((device_data[0].In - mindata ) * ...
//データ
context.beginPath();
context.strokeStyle = 'teal';
context.lineWidth = 2;
context.moveTo( nextpointX , nextpointY );
for (var i = 1; i < (device_data.length); i++) {
if ( device_data[i].In > 0) {
nextpointX = nextpointX + add;
nextpointY = ((device_data[i].In - mindata ...
context.lineTo(nextpointX, nextpointY );
}
}
context.stroke();
//縦軸メモリ
context.beginPath();
context.fillStyle = 'black';
context.textAlign = 'right';
context.fillText(mindata, x1 - 5, ((mindata - minda...
context.fillText(maxdata, x1 - 5, ((maxdata - minda...
context.stroke();
//横軸メモリ
context.beginPath();
context.fillStyle = 'black';
//context.rotate( 45 * Math.PI / 180 );
//context.textAlign = 'right';
context.textAlign = 'center';
for (var i = 0; i < datacount+1; i++) {
if (device_data[i].mday > 0) {
if(device_data[i].color == 0){
context.fillStyle = 'red';
}
if(device_data[i].color == 1){
context.fillStyle = 'green';
}
if(device_data[i].color == 2){
context.fillStyle = 'blue';
}
//context.fillStyle = date_style[device_dat...
context.fillText(device_data[i].date, (x1 +...
}
}
context.stroke();
}
</script>
</head>
<body>
<section>
<h1></h1>
<canvas>
canvas要素が利用できるWebブラウザで開いてください。
</canvas>
</section>
</body>
</html>
}}
<ここから上をコピペ>
ページ名: