勉強したことのメモ

webプログラマが勉強したことのメモ。

highcharts.jsについて

      2014/07/02

プログラムの作りかえを行う際、既存のソースで
highcharts.jsを使っており、これ使い方わかんねぇと
なったので今後のためにメモ。

■サンプル
http://sample.taitan916.info/highchart/

■ダウンロード先
http://www.highcharts.com/download

■ソース
<?php
$ans_list = array('ニッカ', 'バランタイン', 'マッカラン', '山崎');
$ans_val_list = array('12', '5', '30', '18');
?>
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="./highcharts.js"></script>
<script>
$(function () {
$('#container').highcharts({
title: {
text: ''
},
plotOptions: {
pie: {
dataLabels: {
formatter: function() {
return '<b>'+ this.point.name +'</b>:'+ Math.round(this.percentage*10)/10 + '%';
}
}
}
},
series: [{
type: 'pie',
name: '',
data: [
                <? //グラフのデータを書き込み
                    echo '["' . $ans_list[0] . '",' . $ans_val_list[0] . ']';
                    for($i = 1; $i < count($ans_list); $i++) {
                        echo ',["' . $ans_list[$i] . '",' . $ans_val_list[$i] . ']';
                    }
                ?>
]
}],
tooltip: {
formatter: function() {
return this.y +'人';},
enabled:true
}
});
});
</script>
<title>highcharts</title>
</head>
<body>
<h1>highcharts</h1>
<div id="container"></div>
</body>
</html>

 - JavaScript

  関連記事

JavaScriptでinputタグのtypeを変更

チェックボックスの状態によってinputタグのtypeをtext⇔passwor ...

円形のプログレスバーをprogressbar.jsで実装する方法

円形のプログレスバーを実装したかった。CSSだったり画像を用いたりする方法もあっ ...

JavaScriptで年齢計算

JavaScriptで年齢計算。 ■ソース function ageCalcul ...

formでdisplay:none;にしてても送信される

formで特定の部分をdisplay:none;で非表示にしてても 内容は送信さ ...

javascriptでランダム英数字

やりたかった事はjavascriptでランダム英数字の羅列を取得。 ■参考サイト ...

formで複数選択可能なセレクトメニュー(プルダウン)を実装する方法(select2)

フォームで複数選択可能なセレクトボックス(プルダウン)を実装したい。ただHTML ...

ユーザーエージェントなどユーザー情報を取得する方法

上からUA、IP、ホスト名を取得。 $ua = $_SERVER['HTTP_U ...

JavaScriptでdisplay:none/blockの切り替え

jQueryだとhide/show使うか、もしくは toggleだけでいいけどJ ...

highcharts.jsで棒グラフと折れ線グラフを1つのグラフに入れる

やりたかった事は、 ・棒グラフと折れ線グラフを入れたい ・Y軸はそれぞれ違う値に ...

jQueryで偶数or奇数行にclassを付与

やりたかった事は、 ・PHPは使えなくてjavascriptかjQueryを使用 ...