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>
関連記事
-
-
バニラJS対応(jQuery非依存)の画像遅延読み込みプラグイン「echo.js」の利用方法
あるサイトをブラウザの開発者ツールで見ていると「echo.js」と聞いたことの無 ...
-
-
textareaを自動でリサイズしてくれる「ExpandingTextareas」プラグインの利用方法
textareaのheight以上に文字を(複数行)入力しても当然heightの ...
-
-
tableタグでスクロール時にヘッダーを残して表示する方法(jquery-decapitate)
テーブルタグ内で縦にスクロールした際にテーブルヘッダー部分は表示させたままテーブ ...
-
-
Video.jsでテーマを指定して動画プレイヤーのデザインを変更する方法
Video.jsで動画プレイヤーのデザインを変更したい。調べたところWordPr ...
-
-
サイトをダークモード対応させる「Darkmode.js」ライブラリの利用方法
サイトをダークモード対応させる場合、CSSで色々指定しないといけないと思っていた ...