jQuery の jqPlot で作るトレンドラインのラベルを含む凡例付き折れ線グラフ
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta content="width=device-width,
initial-scale=1.0" name="viewport">
<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 href="/lab/css/bootstrap.css" type="text/css" rel="stylesheet"><link href="/lab/css/bootstrap-responsive.css"
type="text/css" rel="stylesheet"><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
href="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/jquery.jqplot.css" type="text/css" rel="stylesheet"><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 language="javascript" type="text/javascript"
src="https://dl.dropbox.com/u/59384927/jquery/GRAPH/jquery.jqplot.1.0.8/plugins/jqplot.trendline.min.js"></script>
//画像指定１ＨＴＭＬ
<div id="jqPlot-sample" style="height: 300px; width: 300px;"></div>
//jQueryのJavaScript２
<script type="text/javascript">
jQuery( function() {
jQuery . jqplot . config . enablePlugins = true;
Tarou = [ [ 1, 65 ], [ 2, 72 ], [ 3, 74 ], [ 4, 63 ], [ 5, 85 ], [ 6, 70 ] ];
Hanako = [ [ 1, 93 ], [ 2, 81 ], [ 3, 79 ], [ 4, 88 ], [ 5, 78 ], [ 6, 96 ] ];
Ichirou = [ [ 1, 81 ], [ 2, 86 ], [ 3, 71 ], [ 4, 69 ], [ 5, 58 ], [ 6, 82 ] ];
jQuery . jqplot(
'jqPlot-sample',
[
Tarou, Hanako, Ichirou
],
{
series: [
{
color: '#bfff80',
label: '先生１',
trendline: {
color: '#80ff00',
label: '先生１トレンドライン',
}
},
{
color: '#80ffbf',
label: '先生2',
trendline: {
color: '#00ff80',
label: '先生2トレンドライン',
}
},
{
color: '#80bfff',
label: '私',
trendline: {
color: '#0080ff',
label: '私のトレンドライン',
}
}
],
legend: {
show: true,
placement: 'outside',
location: 'ne',
}
}
);
} );
</script>
<hr>
<div id="ads" class="container">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script></div>
/////
参考
/////
jQuery 入門
（jQuery 入門 関連すべて Javascript や ＰＨＰ なども・・）
「 jQuery 」 一覧
jQueryの「jqPlot」
/////
参考
/////
jQuery 入門
（jQuery 入門 関連すべて Javascript や ＰＨＰ なども・・）
「 jQuery 」 一覧
jQueryの「jqPlot」
jqPlot
各種グラフ（チャート、図表）を生成するには、jQuery の jqPlot プラグインが便利。
線グラフ 縦棒グラフ 横棒グラフ 面グラフ ウォーターフォールチャート 散布図 バブルチャート マリメッコチャート 円グラフ ドーナツグラフ メーターゲージ トレンドライン ローソク足 いかり足 ブロックチャート ピラミッドグラフ
リファレンス
jQuery の jqPlot プラグイン
導入方法や基本的使い方について。
jQuery の jqPlot プラグインのオプション
オプションについて。
jqplot.barRenderer.js
棒グラフを生成するのに必要なプラグイン。
jqplot.blockRenderer.js
ブロックチャートを生成するのに必要なプラグイン。
jqplot.bubbleRenderer.js
バブルチャートを生成するのに必要なプラグイン。
jqplot.canvasOverlay.js
グラフに線を描き加えるのに必要なプラグイン。
jqplot.dateAxisRenderer.js
年月日や時刻など、軸を時間軸として扱う際に必要なプラグイン。
jqplot.donutRenderer.js
ドーナツグラフを生成するのに必要なプラグイン。
jqplot.dragable.js
系列のデータポイントをドラッグで移動できるようにするのに必要なプラグイン。
jqplot.enhancedLegendRenderer.js
凡例機能を拡張するのに必要なプラグイン。
jqplot.highlighter.js
ツールチップなど、ハイライト表示に必要なプラグイン。
jqplot.meterGaugeRenderer.js
メーターゲージを生成するのに必要なプラグイン。
jqplot.ohlcRenderer.js
いかり足やローソク足などのチャートを生成するのに必要なプラグイン。
jqplot.pieRenderer.js
円グラフ（パイチャート）を生成するのに必要なプラグイン。
jqplot.pointLabels.js
データポイントラベルを表示するのに必要なプラグイン。
jqplot.trendline.js
トレンドラインを描き加えるのに必要なプラグイン。
/////
