簡単にグラフが作成できるのですが、なんか本当に人気が無いように思います。 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, "ＭＳ Ｐゴシック", 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.・・・・とは言うものの６年前の話です。そもそも、日本語で書かれた新しい情報が皆無なので apikey に関する流れは確認できません。いらないんだから、どっちでもいいですけれど、Google と長く付き合うと良くある事ではあります。
タグ：google
|
|
【JavaScript ライブラリの最新記事】
- clipboard.js を使用してテキストをコピーする際に clipboard.js が必要とするパーツと意味
- clipboard.js のコピーさせるテキストを自由にダイナミックに渡す方法は、Advanced Usage の text です。
- JavaScript の内部コード文字列を SHIFT_JIS としてダウンロードさせる方法
- 自サイト(logical error を含む)で使用している SyntaxHighlighter のツールバーの問題点をごっそり自前で修正・カスタマイズしました。( その2 / ソースをクリップボード..
- 自サイト(logical error を含む)で使用している SyntaxHighlighter のツールバーの問題点をごっそり自前で修正・カスタマイズしました。( その1 / ソースの表示 )
- ブラウザ上のテキストデータを名前を付けて保存できる FileSaver.js を使って、テーブルのデータを Excel で開ける事を想定した CSV にして PC に保存
- JavaScript のみで、SHIFT_JIS や EUC-JP を UrlEncode に近い Escapeする Escape Codec Library
- JavaScript でクリップボードに文字列をコピーする Clipboard.js の使用方法と注意事項
- Lightbox2 ライブラリの今時の使い方
- Lightbox2 で data-title にボタンを埋め込んで、クリックしたら 画像のファイル名を取り出して Lightbox2 を閉じるギャラリーのデモ
- EASELJS を使用した画像の分割と分割されたエリア毎のアニメーション / createjs.Ticker の reset と init はうまく動きませんでした
- EASELJS を使用した画像の縮小とトリミングと角丸マスク / 画像は new Image でイベント処理して画像サイズを取得します
- Three.js r73 での Canvas で平面を飛翔させる為の詳細デモ
- クリスマスに備えて、『雪を降らす snowstorm.js』のカスタマイズ / ダウンロードも何も必要ありません。jQuery も必要ありません
- JavaScript : 誰でもすぐ使える Google 円グラフ(2) : データを Google ドキュメントから取得する
- JavaScript : 誰でもすぐ使える Google 円グラフ
- カラーピッカーのライブラリなのですが、ちょっと雑な作りだったので、修正してリリースです。
- google.load で Yahoo UI のメニューを使う
