Category

JavaScript

2018年12月25日
0

サイトにJavaScriptでグラフを表示する

By | JavaScript

Chart.jsはグラフ作成用のJavaScriptライブラリーです。簡単にアニメーションのついたグラフを表示することができます。折れ線グラフ、円グラフ、棒グラフ等、様々な種類が用意されています。

使い方

<canvas id="myChart" ></canvas>

まず、Chart.jsのライブラリーを読み込みます。今回はCDNを利用します。
他にもいくつか方法はあるので、公式サイトで確認してみてください。

https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js

JavaScriptでグラフの内容を記載します。

<script type= text/javascript >
    var ctx = document.getElementById('myChart').getContext('2d');
    var myDoughnutChart = new Chart(ctx, {
        type: 'doughnut',data: {
            labels: ["Red", "Blue", "Yellow"],
            datasets: [{data: [300, 50, 100],
                backgroundColor: ["rgb(255, 53, 92)","rgb(1, 145, 255)","rgb(255, 186, 45)"]
            }]
        }
    });
</script>

グラフを表示したいところにcampusタグを記入。

<canvas id="myChart" ></canvas>
2018年1月6日
0

お問い合わせフォームにJavaScriptを使って自動カタカナ入力の機能をつける

By | jQuery

ホームページのお問い合わせフォームには、お問い合わせいただいた方に連絡を取るさい、漢字の読み方を間違えないために、かなの入力欄がある場合がありますが、入力する方からすると2度名前を入力しなくてはならず面倒です。そこで、少しでも負担なく入力してもらうために自動入力の機能を実装したいと思います。

今回、JQueryプラグインであるjquery.autoKana.jsを利用します。jquery.autoKana.jsは下記からダウンロードできます。
harisenbon/autokana · GitHub

&lt;head&gt;
	&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" data-semver="2.2.0" data-require="jquery@*"&gt;&lt;/script&gt;
	&lt;script src="jquery.autoKana.js" language="javascript" type="text/javascript"&gt;&lt;/script&gt;
	&lt;script type="text/javascript"&gt;
    	$(document).ready(
        	 $.fn.autoKana('#your-name-sei', '#your-namekana-sei', {
        		katakana : false  //true：カタカナ、false：ひらがな（デフォルト）
    		});
    		$.fn.autoKana('#your-name-mei', '#your-namekana-mei', {
        		katakana : false  //true：カタカナ、false：ひらがな（デフォルト）
    		});
    	});
	&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;div&gt;
    	&lt;label class=""&gt;氏名&lt;/label&gt;
    	&lt;input type="text" id="your-name-sei"&gt;
		&lt;input type="text" id="your-name-mei"&gt;
	&lt;/div&gt;
	&lt;div&gt;
    	&lt;label class=""&gt;カナ&lt;/label&gt;
    	&lt;input type="text" id="your-namekana-sei"&gt;
		&lt;input type="text" id="your-namekana-mei"&gt;
	&lt;/div&gt;
&lt;/body&gt;

このように必要なファイルを読み込んでjavascriptでそれぞれ対象を指定するだけです。完璧に自動入力まではいきませんが、これで入力はかなり楽になると思います。