SQLの窓

2016年06月14日


Google Visualization API って apikey いらなくなった? / ライブラリロード方法が変わってました

簡単にグラフが作成できるのですが、なんか本当に人気が無いように思います。

Quick Start

先に DataTable を作っていろいろ UI や グラフ のタイプを変えるのですが、やはり、使い勝手のいい 円グラフが Quick Start で紹介されています。

そのサンプルはそれとして、以前より使用しているサンプルにフォント設定を追加したのが以下になります。

fontName や fontSize をはじめとするオプションのリファレンスはこちらです。

ソースコード
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

<script type="text/javascript">

function drawChart() {

	var data = new google.visualization.DataTable();
	data.addColumn('string', '対象');
	data.addColumn('number', '件数');
	data.addRows(3);

	data.setValue(0, 0, '対象A');
	data.setValue(0, 1, 2000);
	data.setValue(1, 0, '対象B');
	data.setValue(1, 1, 3000);
	data.setValue(2, 0, '対象C');
	data.setValue(2, 1, 1500);

	var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

	chart.draw(
		data, {
			fontSize: 16,
			fontName: 'Arial, Helvetica, Verdana, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "MS Pゴシック", sans-serif',
			width: 400,
			height: 300,
			is3D: true,
			title: '円グラフのタイトル'
		}
	);

}

</script>

<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
</script>

昔は google.load ってのを使ってました。ライブラリも apikey 付きで、www.google.com/jsapi です。(今でも動きます)
key が無いとこんな文句言われてました
Warning: You need your own API key in order to use the Google Loader.  Without your own key, examples won't work. 
・・・・とは言うものの6年前の話です。そもそも、日本語で書かれた新しい情報が皆無なので apikey に関する流れは確認できません。いらないんだから、どっちでもいいですけれど、Google と長く付き合うと良くある事ではあります。
タグ:google
【JavaScript ライブラリの最新記事】
posted by lightbox at 2016-06-14 20:26 | Comment(0) | JavaScript ライブラリ | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり