Fields Medalists (1936 - 2010) (数学のノーベル賞:フィールズ賞)「jQuery」 jqPlot 円グラフ
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
:
jqPlot 円グラフ ツールチップ表示 サンプル </title>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="/lab/css/ie.css"/><script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<link rel="stylesheet" type="text/css" href="/lab/css/bootstrap.css"><link rel="stylesheet" type="text/css" href="/lab/css/bootstrap-responsive.css"><script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js"></script><link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/jquery.jqplot.css"><script type="text/javascript" src="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/jquery.jqplot.min.js"></script><script type="text/javascript" src="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/excanvas.min.js"></script><script type="text/javascript" src="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/plugins/jqplot.pieRenderer.min.js"></script><script type="text/javascript" src="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/plugins/jqplot.highlighter.min.js"></script><hr>
<div class="container">
<hr>
<div id="div1033" style="height:400px;width:500px;"></div>
<style>
.jqplot-data-label {
color: #fff;
font-weight:bold;
}
</style>
<script>
$(document).ready(function(){
// データ
data = [[['United States',12],['France',11],['Russia',9],['United Kingdom',7],['Japan',3],['Belgium',2],['Others',10]]]
// データラベル
datalabel = ['United States 12','France 11','Russia 9','United Kingdom 7','Japan 3','Belgium 2','Others 10']
// 円グラフ配色
seriescolors = [
"#4472A6","#AA4644","#89A550","#715891","#4199AF","#D08949","#616161"
]
// オプション
option = {
title: 'Fields Medalists (1936 - 2010)', // タイトル
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer, // 円グラフ
rendererOptions: {
dataLabels: datalabel, // データラベル
showDataLabels: true, // データラベル表示有無
startAngle: -90 // 円グラフ基線位置
}
},
seriesColors: seriescolors,
// legend: { show:true, location: 'e' }, // 凡例
highlighter: {
show: true,
useAxesFormatters: false,
// tooltipLocation: 'e',
formatString:'%s, %P',
// tooltipAxes: 'pieref',
// tooltipAxisX: 60,
// tooltipAxisY: 90,
},
}
// 作成実行
$.jqplot ('div1033', data, option);
});
</script>
</div>
<hr>
<div class="container" id="ads">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script></div>
/////
jQuery の jqPlot プラグインで作る円グラフ(パイチャート、Pie chart)
/////
jQuery の jqPlot プラグインで作るドーナツグラフ
/////
jQuery の jqPlot プラグインで作る円グラフ(パイチャート、Pie chart)
http://alphasis.info/jquery-plugins/jqplot/pie-charts/
円グラフ
jQuery の jqPlot プラグインで作る円グラフ(パイチャート、Pie chart)。
jQuery の jqPlot プラグインで作る円グラフ
jQueryのjqPlotプラグインで、円グラフ(パイチャート)を描く方法。
jQuery の jqPlot プラグインで作るデータラベル付き円グラフ
jQueryのjqPlotプラグインで、データラベル付き円グラフ(パイチャート)を描く方法。
jQuery の jqPlot の円グラフにおいて、ラベルをデータラベルとして表示
jQueryのjqPlotプラグインで作る円グラフ(パイチャート)において、ラベルをデータラベルとして表示する方法。
jQuery の jqPlot の円グラフにおいて、値をデータラベルとして表示
jQueryのjqPlotプラグインで作る円グラフ(パイチャート)において、値をデータラベルとして表示する方法。
jQuery の jqPlot の円グラフで、パーセンテージをデータラベルとして表示
jQueryのjqPlotプラグインで作る円グラフ(パイチャート)において、パーセンテージを、データラベルとして表示する方法。
jQuery の jqPlot の円グラフで、配列の内容をデータラベルとして表示
jQueryのjqPlotプラグインで作る円グラフ(パイチャート)において、配列で順番に指定した内容を、データラベルとして表示する方法。
jQuery の jqPlot プラグインで作る凡例付き円グラフ
jQueryのjqPlotプラグインで、凡例付き円グラフ(パイチャート)を描く方法。
jQuery の jqPlot プラグインで作る2列の凡例付き円グラフ
jQueryのjqPlotプラグインで、2列の凡例付き円グラフ(パイチャート)を描く方法。
jQuery の jqPlot プラグインで作るスライスを塗りつぶさない円グラフ
jQueryのjqPlotプラグインで作るデータラベル付き円グラフ(パイチャート)において、スライスを塗りつぶさない方法。
jQuery の jqPlot プラグインで作る、スライス間に余白がある円グラフ
jQueryのjqPlotプラグインで作るデータラベル付き円グラフ(パイチャート)において、スライスとスライスの間に余白を入れる方法。
jQuery の jqPlot で作る、塗りつぶさないスライス間に余白がある円グラフ
jQueryのjqPlotプラグインで作るデータラベル付き円グラフ(パイチャート)において、スライスとスライスの間に余白を入れ、さらに、スライスを塗りつぶさない方法。
jQuery の jqPlot の円グラフの1つ目のスライスを描き始める場所を指定
jQueryのjqPlotプラグインで作る円グラフ(パイチャート)において、1つ目のスライスを描き始める場所を角度で指定する方法。
jQuery UI と jqPlot で作るサイズを変更できる円グラフ
jQueryのjqPlotプラグインで作る円グラフにおいて、jQuery UIのResizableを併用し、ドラッグ&ドロップで、サイズを変更できるようにする方法。
/////
jQuery の jqPlot プラグインで作るドーナツグラフ
http://alphasis.info/jquery-plugins/jqplot/donut-charts/
ドーナツグラフ
jQuery の jqPlot プラグインで作るドーナツグラフ。
jQuery の jqPlot プラグインで作るドーナツグラフ
jQueryのjqPlotプラグインで、ドーナツグラフを描く方法。
jQuery の jqPlot プラグインで作る2重ドーナツグラフ
jQueryのjqPlotプラグインで、2重ドーナツグラフを描く方法。
jQuery の jqPlot で作るスライス間に余白があるドーナツグラフ
jQueryのjqPlotプラグインで作るデータラベル付きドーナツグラフにおいて、スライスとスライスの間に余白を入れる方法。
jQuery の jqPlot プラグインで作るデータラベル付きドーナツグラフ
jQueryのjqPlotプラグインで、データラベル付きドーナツグラフを作る方法。
jQuery の jqPlot のドーナツグラフにおいて、ラベルをデータラベルとして表示
jQueryのjqPlotプラグインで作るドーナツグラフにおいて、ラベルをデータラベルとして表示する方法。
jQuery の jqPlot のドーナツグラフにおいて、値をデータラベルとして表示
jQueryのjqPlotプラグインで作るドーナツグラフにおいて、値をデータラベルとして表示する方法。
jQuery の jqPlot のドーナツグラフでパーセンテージをデータラベルとして表示
jQueryのjqPlotプラグインで作るドーナツグラフにおいて、パーセンテージをデータラベルとして表示する方法。
jQuery の jqPlot のドーナツグラフで、配列の内容をデータラベルとして表示
jQueryのjqPlotプラグインで作るドーナツグラフにおいて、配列で順番に指定した内容を、データラベルとして表示する方法。
jQuery の jqPlot のドーナツグラフの1つ目のスライスを描き始める場所を指定
jQueryのjqPlotプラグインで作るドーナツグラフにおいて、1つ目のスライスを描き始める場所を角度で指定する方法。
jQuery の jqPlot プラグインで作るスライスを塗りつぶさないドーナツグラフ
jQueryのjqPlotプラグインで作るデータラベル付きドーナツグラフにおいて、スライスを塗りつぶさない方法。
jQuery の jqPlot プラグインで作る凡例付きドーナツグラフ
jQueryのjqPlotプラグインで、凡例付きドーナツグラフを描く方法。
jQuery の jqPlot プラグインで作る2列の凡例付きドーナツグラフ
jQueryのjqPlotプラグインで、2列の凡例付きドーナツグラフを描く方法。
/////