たつをの ChangeLog

6 件 見つかりました。

1 2 [ 次へ ]

【JavaScript】Chart.js を使ってみる

2019-03-21-1 [JavaScript][Programming]
作業メモ的な話。
JavaScript のグラフ描画ライブラリ「Chart.js」を使ってみた。
練習として、折れ線グラフや棒グラフなどの基本グラフと、バブルチャートなどの点描系グラフの2種類でサンプルプログラムを作成。
フォームにCSVを貼り付けるとグラフ描画するやつ。

chart.js%20sampe%20graph chart.js%20sampe%20graph

今後はこれをベースにいろいろやってみる。


メモ（随時追記）

  • グラフの大きさ指定
    • 公式ドキュメントの通りに canvas タグ にサイズ指定しても効かない
      <canvas id="myChart" width="400" height="400"></canvas>
    • 公式サンプルではこうやっている（効く）
      <div style="width:75%;"><canvas id="canvas"></canvas></div>

参考


【JavaScript】表示/非表示切り替えのためのコード片

2018-03-07-1 [JavaScript][Programming]
自分用メモ。
領域を表示したり見えなくしたり入れ替えたりをトグルボタンで切り替え。
定期的に同じようなの書いてるけど現状版として。

show_hide




<script>
function show_hide(id) {
  if (!document.getElementById) return;
  if (!document.getElementById(id)) return;
  if (document.getElementById(id).style.display != "block")
    document.getElementById(id).style.display = "block";
  else
    document.getElementById(id).style.display = "none";
}
function show_hide_class(cn) {
  var es = document.getElementsByClassName(cn);
  for (var i = 0; i < es.length; i++) {
    if (es[i].style.display != "block")
      es[i].style.display = "block";
    else
      es[i].style.display = "none";
  }
}
</script>

<body onload="document.getElementById('b<TMPL_VAR name=ymd>').click()">

<div style="margin:1em">
<button id="b<TMPL_VAR name=ymd>" type="button" onclick="show_hide('c<TMPL_VAR name=ymd>');show_hide_class('s<TMPL_VAR name=ymd>')">
<span class="s<TMPL_VAR name=ymd>" style="display:block">見る</span>
<span class="s<TMPL_VAR name=ymd>" style="display:none">隠す</span>
</button>
</div>

<div id="c<TMPL_VAR name=ymd>" style="display:none">
[領域]
</div>

switch


[AAAAAA]


<div style="margin:1em">
<button id="b20180306" type="button" onclick="show_hide_class('s20180306')">
<span class="s20180306" style="display:block">領域A</span>
<span class="s20180306" style="display:none">領域B</span>
</button>
</div>
<div class="s20180306" style="display:block">[AAAAAA]</div>
<div class="s20180306" style="display:none">[BBBBBB]</div>

関連記事


ブラウザ内で完結＆データ送信なし！「アマゾンアソシエイト注文数ランキング集計器」を作りました

2017-09-27-2 [JavaScript][Programming][Affiliate][Release]
Amazonアソシエイトのレポートページが新しくなったのですが、表のソート機能がなくなり、その場でのちょっとした分析ができなくなりました。なのでレポートデータをダウンロードして分析する必要があります。

私は、先日公開したPerl スクリプト「aarep」[2017-08-14-1]を使ってダウンロードしたレポートの分析作業をしているのですが、慣れない人にとっては「aarep」を動かす環境を整えるのが大変です。特に Windows PC だと。

ということで、ウェブブラウザさえあれば簡単にランキング集計できるページを作りました。エクセル不要です。


「注文レポート」を読み込んで注文数ランキングを作ります。「売上レポート」などの他のレポートには対応していません。

集計プログラムは JavaScript で書かれていて、処理はWebブラウザ内で完結します。つまり、レポートを外部へ一切送信しないのでプライバシー面で安心です。

どうぞご利用ください。

関連記事

この記事に言及しているこのブログ内の記事

【JavaScript】画像とテキスト（例えばアイコンとユーザ名）をまとめて一気に切り替える仕掛け

2016-07-14-2 [JavaScript][Programming]
自分用メモ。
画像とテキスト（例えばアイコンとユーザ名）をまとめて一気に表示オンオフ切り替える方法について。
コード貼り付け作業ミニマムで済ますための単純なやりかた。
画像とテキストの組み合わせに限らず、どんな要素の組み合わせでもよい。

表示切替：

表示場所：
hatenacinnamon jkondo naoya



ソースコード：
<style>
.icon {display:inline-block}
.hid {display:none}
</style>
<script>
function switch_display(show, hide) {
    var es = document.getElementsByClassName(show);
    for (var i=0; i<es.length; i++) {
        es[i].style.display = "inline-block";
    }
    var eh = document.getElementsByClassName(hide);
    for (var i=0; i<eh.length; i++) {
        eh[i].style.display = "none";
    }
}
</script>
<p>
表示切替：<br>
<button type="button" onclick="switch_display('hid','icon')">USER-ID</button>
<button type="button" onclick="switch_display('icon','hid')">ICON</button>
</p>
<p>
表示場所：<br>
<span class="icon"><img src="https://www.hatena.ne.jp/users/ha/hatenacinnamon/profile_l.gif"></span>
<span class="hid">hatenacinnamon</span>
<span class="icon"><img src="https://www.hatena.ne.jp/users/jk/jkondo/profile_l.gif"></span>
<span class="hid">jkondo</span>
<span class="icon"><img src="https://www.hatena.ne.jp/users/na/naoya/profile_l.gif"></span>
<span class="hid">naoya</span>
</p>

参考


【JavaScript】条件にあうリストアイテム(li)の表示/非表示を切り替える

2016-02-07-2 [Programming][JavaScript]
条件にあうリストアイテム(li)を非表示にしたり表示したりするための JavaScript による方法をメモ。

一度非表示にしたあとに再表示するとliの頭の点が消えてしまう問題はどうしたもんでしょうかねえ。

  • 条件にあうリストに特定のクラスを設定
  • JavaScript で display:none
  • サンプルページ
  • 困った問題とその対処
    • li の style.display を javascript で none にしてから block にすると頭のポチが消えてしまう。
    • その場しのぎとして、最初から頭の点を無くすことにした。
      • ul の list-style-type を none に

サンプルページのHTMLソース：
<!DOCTYPE html>
<html lang="ja">
<head>
<title>HIDE LIST ITEMS TEST JavaScript</title>
<script>
function foobar(id,cn) {
  if (!document.getElementById) return;
  if (!document.getElementById(id)) return;
  var onoff = !document.getElementById(id).checked;
  show_hide_items(cn, onoff);
}
function show_hide_items (cn,vsbl) {
  if (!document.getElementsByClassName) return;
  if (!document.getElementsByClassName(cn)) return;
  var obj = document.getElementsByClassName(cn);
  for (var idx = 0; idx < obj.length; idx++) {
    if (vsbl) obj[idx].style.display = "block";
    else obj[idx].style.display = "none";
  }
}
</script>
</head>
<body>
<input type="checkbox" name="btn" id="btn" onclick="foobar('btn','nactv')">HIDE LIST ITEMS

<ol><li>

list-style-type:none
<ul style="list-style-type: none; padding: 0;">
<li>1001</li>
<li class="nactv">1002
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</li>
<li class="nactv">1003</li>
<li>1004</li>
</ul>

</li><li>

default
<ul>
<li>1001</li>
<li class="nactv">1002</li>
<li>1003</li>
<li class="nactv">1004</li>
</ul>

</li></ol>

</body>
</html>
この記事に言及しているこのブログ内の記事

1 2 [ 次へ ]

たつをの ChangeLog
Powered by chalow