: jqPlot 円グラフ ツールチップ表示 サンプル


/////
 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)

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列の凡例付きドーナツグラフを描く方法。

/////