jqPlot jquery_jquery に基づく描画プラグイン

Javaベースのグラフィカルレポートについても以前お話しましたが、機能や見た目も良いのですが、汎用性に課題があります。そこで、使いやすさ、互換性、拡張性を備えた JS チャート プラグインを学びましょう。

jqPlot は、jquery クラス ライブラリに基づいたアイコン描画プラグインです。 jqPlot を使用すると、Web ページ上に線形グラフ、柱状グラフ、円グラフ、その他のスタイルのグラフを描画できます。さらに、jqPlot にはプラグインの拡張性 (Pluggability) があり、独自のチャート スタイルを作成できます。

公式アドレス: http://www.jqplot.com/

機能概要:

さまざまなチャートスタイルが利用可能
日付軸をカスタマイズできます
回転軸のテキストを設定できます
傾向線を自動的に計算します
ツールバーのヒントと強調表示されたデータポイント
デフォルトの最適な設定、非常に使いやすい
上記の機能は次のとおりですin jqPlot ホームページ上のサンプル ページには、多くの視覚的表現が含まれています。詳細な使用方法のドキュメントは次のとおりです。

欠点: ヒストグラムは特定のデータ値を表示できません。円グラフでは特定のパーセンテージを表示できません。

以下は収集された詳細なパラメータ設定です:

コードをコピーします コードは次のとおりです:

options =
{
seriesColors: [ "#4bb2c5", "#c5b47f", "#EAA228", "#579575", "#839557", "#958c12",
"#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc"], // カテゴリのデフォルトの表示色
// カテゴリの数がその数を超えた場合次に、キューの最初の位置から開始して、対応するカテゴリに値を割り当てます。
stackSeries: false, // true に設定され、複数のカテゴリがある場合 (折れ線グラフの場合は、複数の行)、
//縦軸上の各カテゴリ (ポリライン) の値は、前のすべてのカテゴリの縦軸値の合計とその縦軸の合計です。
//値 (例: 現在のカテゴリの縦軸の値は Y3
// で、その前に Y2 と Y1 がある場合、Y 軸に表示される値は Y2 Y3 Y1 になります。現在、この属性は折れ線グラフとbar charts
title: '', //現在のグラフのタイトルを設定します
title: {
text: '', //現在の図のタイトルを設定します
show: true,/ /現在のタイトルを表示するかどうかを設定します
},
axisDefaults: {
show: false, // 軸をレンダリングするかどうか。
min: null, // 最小値。水平 (垂直) 座標で表示される値
max: null, // 水平 (垂直) 座標で表示される最大値 Value
pad: 1.2, // 乗算係数、
//(横(縦)軸のデータの最大値 - 横(縦)軸のデータの最小値) *パッド値 = 軸表示 横(縦)座標間隔の長さ
//この軸に表示される水平(垂直)座標間隔の長さ = 水平(垂直)座標で表示される最大値 - 水平(垂直)座標で表示される最小値
// If If 最大値と min が設定されている場合、min と max で設定された値が優先されます。
ticks: [], //水平 (垂直) 座標のスケール上の値を設定します。これはティック内の値にすることができますarray.
// 1D [val1, val2, ...] または 2D [[val, label], [val, label], ...]
numberTicks: unknown, // 除算係数, 水平 (垂直) 座標スケール間隔の設定に使用されます
//水平 (垂直) 座標スケール間隔値 ​​= 水平 (垂直) 座標スケール間隔の長さ/(numberTicks-1)
tickInterval:'', //水平(垂直) 座標間隔の長さ) 座標スケール間隔値。日付文字列にすることができます
renderer: $.jqplot.LinearAxisRenderer, // dateAxisRenderer を含む、水平 (垂直) 軸にデータをロードするためのレンダラーを設定します (この記事の最後に関連する紹介があります)。
rendererOptions: {}, // レンダラのオプション構成オブジェクトを設定します。折れ線グラフは設定する必要はありません。
// さまざまなチャートのオプション構成オブジェクトについては、次の「オプション オブジェクト」を参照してください。 jqPlot のさまざまなプラグインの設定"
//各チャートのオプション オブジェクトを
tickOptions: {
mark: 'outside', // 座標軸の水平 (垂直) 座標スケール表示モードを設定します, 座標軸の内側、外側、貫通に分かれています 座標軸表示
// 値も'外側'、'内側'、'十字'に分けられます,
showMark: true, / /目盛りを表示するかどうかを設定します
showGridLine: true, // グラフ内かどうか エリアに目盛り値の方向にグリッド線を表示します
markSize: 4, // 各目盛りの頂点と目盛の間の距離座標軸上の点 (ピクセル単位)
//マーク値が 'cross' の場合、各目盛りには上頂点と下頂点があり、目盛りは座標軸と交差します
//目盛りの真ん中の場合、距離は×2,
show: true, // 目盛り、目盛りと同じ方向のグリッド線、目盛りのスケール値を表示するかどうか座標軸
showLabel: true, // 座標軸に目盛りとスケール値を表示するかどうか
formatString: '', // 座標軸のスケール値の表示形式を設定します。例: '%b %#d, %Y' は形式「月、日、年」、「AUG 30,2008」を表します
fontSize:'10px', //スケール値のフォント Size
fontFamily: 'Tahoma', //スケール値のフォント
angle:40, //スケール値と座標軸の間の角度、角度は座標軸の正の時計回りの方向です
fontWeight:'normal ' , //フォントの太さ
fontStretch:1//スケール値の方向(座標軸の外側)への伸縮度(ストレッチ)
}
showTicks: true, // / 目盛りを表示するかどうかと、座標軸上の目盛り値
showTickMarks: true, //目盛りを表示するかどうかを設定します
useSeriesColor: true //縦（横）の座標軸が複数ある場合は、このプロパティは、これらの座標軸が異なる色で表示されるかどうかを設定します。 Display
},

axes: {
xaxis: {
// 設定は axisDefaults
} と同じです。
yaxis: {
// 設定は axisDefaults と同じです
}、
x2axis: {
// 設定は axisDefaults
}、
y2axis と同じです: {
// 設定は axisDefaults
}
},

seriesDefaults: {// 複数のカテゴリがある場合、次のようにして各カテゴリの共通属性を設定できます。この構成属性
show: true, // グラフ領域全体をレンダリングするかどうかを設定します (つまり、グラフ内のコンテンツを表示します)
xaxis : 'xaxis', // 'xaxis' または 'x2axis' yaxis: 'yaxis', // 'yaxis' または 'y2axis'。
label: '', // カテゴリ名ボックスのカテゴリ名に表示されます
color: '', / / アイコンで表されるカテゴリの色 (割引、棒グラフなど)
lineWidth: 2.5, // カテゴリ グラフ (特に折れ線グラフ) はどこにありますか width
shadow: true, // かどうか各グラフはチャート内のシャドウ領域を表示します
shadowAngle: 45, // グリッド内の同じパラメータを参照します
shadowOffset: 1.25, // グリッド内の同じパラメータを参照します
shadowDepth: 3, //グリッド内の同じパラメータを参照
shadowAlpha: 0.1, //グリッド内の同じパラメータを参照
showLine: true, //チャートにポリラインを表示するかどうか（ライン内のポリライン） chart)
showMarker: true, // チャート内のデータ ノードを強調表示するかどうか
fill: false, // チャート内のポリラインの下の領域を塗りつぶすかどうか (塗りつぶしの色はポリラインと同じです) color) と凡例によって設定されたカテゴリ名ボックス
// ここで、fill が true の場合、
//showLine が true である必要があることに注意してください。そうでない場合、効果は表示されません
fillAndStroke: false, //fill が true の場合、塗りつぶし 領域の上部に線が表示されます（折れ線グラフの場合は線が表示されます）
fillColor: undefine, // 塗りつぶしの色を設定しますarea
fillAlpha: unknown, // 塗りつぶし領域の透明度を設定します
renderer: $.jqplot.PieRenderer, // レンダラー (ここでは円グラフ PieRenderer) を使用して、既存のグラフをレンダリングします
//これにより、必要な chart
rendererOptions: {}, // 設定されたレンダラーのオプション オブジェクトに渡されます。折れ線グラフのレンダラーにはオプション オブジェクトがありません。さまざまなチャートのオプション設定オブジェクトについては、次の「jqPlot のさまざまなプラグインのオプション オブジェクト設定」を参照してください。
//設定オプション オブジェクトの各チャート
markerRenderer: $.jqplot.MarkerRenderer, // rendererデータの描画に使用する
// マーカーをポイントします。
markerOptions: {
show: true, // データ ポイントを図内に表示するかどうか
style: 'filledCircle', // 方法各データ ポイントはグラフに表示されます。デフォルトは「filledCircle」（実線の円）、
//その他のいくつかの方法では、circle、diamond、square、filledCircle、
//filledDiamond、またはfilledSquareです。 2, // データ ポイントの各辺の幅 (設定が大きすぎると、各辺が繰り返され、実線の点のように表示されます)
size: 9, // データ ポイントのサイズ
color: '#666666' // データポイントの色
shadow: true, // データポイントの影領域を表示するかどうか（立体感を高める）
shadowAngle : 45 , // 影領域の角度、x 軸の時計回り
shadowOffset: 1, // グリッド内の同じパラメータを参照
shadowDepth: 3, // グリッド内の同じパラメータを参照
shadowAlpha: 0.07 // グリッド内の同じパラメータを参照します
}
isDragable: true, // ドラッグが許可されているか (ドラッグ可能なパッケージが導入されている場合)、デフォルトでドラッグ可能かどうか
},
series:[//表示する必要があるカテゴリが複数ある場合は、ここで各カテゴリの関連する構成プロパティを設定します
//例: カテゴリ名ボックスに各カテゴリのカテゴリ名を設定します
/ /[label: 'トラップ部門'},{label: 'デコイ部門'},{label: 'ハーモニー部門'}]
//コンフィグレーションパラメータの設定はseriesDefaultsと同じです
],

legend : {
show: false,//カテゴリ名ボックスを表示するかどうかを設定します (つまり、すべてのカテゴリの名前が画像内の特定の場所に表示されます)
location: 'ne', // カテゴリ名ボックスが表示される位置、nw、n、ne、e、se、s、sw、w。
xoffset: 12, // カテゴリ名ボックスとチャートの上端の間の距離area (unit px)
yoffset: 12, // カテゴリ名ボックス間の距離 グラフエリアの左端からの距離 (単位 px)
background:'' // カテゴリ名ボックス間の距離グラフ領域の背景色
textColor:'' //カテゴリ名ボックスとグラフ領域内のフォントの色との距離
.. スタイル設計に関するその他の情報については、公式ドキュメントを参照してください。
},

grid: {
drawGridLines: true, // グリッド全体に線を描画するかどうか
gridLineColor: '#cccccc' // グリッドの色を設定します。アイコン領域全体の背景線
background: '#fffdf6', // グラフ領域全体の背景色を設定します
borderColor: '#999999', // グラフの（最も外側の）境界線を設定します
borderWidth: 2.0, //チャートの（最も外側の）境界線の幅を設定します
shadow: true, //アイコン全体の（最も外側の）境界線に影を設定して、その立体感を強調します
shadowAngle: 45, // 影領域の角度を設定します。X 軸から時計回りに回転します。
shadowOffset: 1.5, // 画像の境界線からの影領域のオフセット距離を設定します。
shadowWidth: 3, // シャドウ領域の幅を設定します
shadowDepth: 3, // オーディオおよびビデオ領域で重なるシャドウの数を設定します
shadowAlpha: 0.07 // シャドウ領域の透明度を設定します
renderer: $.jqplot.CanvasGridRenderer, // グリッドの描画に使用するレンダラー。
rendererOptions: {} // レンダラーに渡すオプション。デフォルトの
// CanvasGridRenderer には追加のオプションはありません。 },

/**************************jqPlot のさまざまなプラグインのオプション オブジェクト設定**************** ******** **********/

//BarRenderer (ヒストグラムの Option オブジェクトの設定)
//この Option オブジェクトは、ヒストグラムに関連する構成オブジェクトの設定に適用されます。ヒストグラムの series プロパティと seriesDefault プロパティ
seriesDefaults: {
rendererOptions: {
barPadding: 8, //同じカテゴリ (px) の 2 つの柱状バー間の距離を設定します
barMargin: 10, //異なるカテゴリの 2 つの柱状バー間の距離 (px) を設定します (横座標テーブルの点と同じ)
barDirection: 'vertical', // 棒グラフの表示方向を設定します: 垂直表示と水平表示
//、デフォルトの垂直表示は垂直または水平です。
barWidth: null, // ヒストグラムの各列バーの幅を設定します。
shadowOffset: 2, // グリッドと同じ属性設定
shadowDepth: 5, // グリッドと同じ属性設定
shadowAlpha: 0.8, // グリッドと同じ グリッドと同じ属性設定
}
},

// Cursor (カーソル)
// マウスが画像に移動すると、多くの場合ハイライト機能を使用してマウスが画像内に表示されます。同時に、
// さらに、画像内の特定の領域をドリルします (ズームインします)
//設定オブジェクトはオプション

cursor: {
style: 'crosshair', //Whenマウスが画像上に移動したときのマウスの表示スタイル。属性値はcssクラスです。
show: true, //カーソルを表示するかどうか
showTooltip: true, // プロンプト情報を表示するかどうか。 bar
followMouse: false, // カーソルプロンプト情報バーがカーソル（マウス）とともに移動するかどうか
tooltipLocation: 'se', // カーソルプロンプト情報バーの位置を設定します。 followMouse=true の場合、位置は
//カーソルを基準としたプロンプト情報バーの位置です。それ以外の場合は、カーソルのアイコン内の情報バーの位置を要求します
// この属性のオプションの値: n、ne、e、se など。
tooltipOffset: 6, // 間の距離プロンプト情報バーとマウス (followMouse= true) または座標軸の位置 (followMouse=false)
showTooltipGridPosition: false, // 情報プロンプト バーにカーソル位置を表示するかどうか (ピクセル距離に基づいて)アイコンの左端と上端の間)
showTooltipUnitPosition: true, // カーソルの位置を指示する情報バーを表示するかどうか (水平軸と垂直軸のデータ値を取得します)
// 注: これと showTooltipGridPosition 値の違いに注意してください。前者は座標値を表示し、データ値はそこに表示されます。
tooltipFormatString: '%.4P', // ハイライターのtooltipFormatString と同じ
useAxesFormatters: true, / / ハイライターの tooltipFormatString と同じ
tooltipAxesGroups: [], // 指定された軸グループのみをツールチップに表示します:
// [['xaxis', 'yaxis'], ['xaxis', 'y2axis) ']]。デフォルトでは、プロット内の系列のすべての軸
// の組み合わせが表示されます。

// ドラッグ可能 (ドラッグ)
//この構成オブジェクトは、seriesDefaults およびシリーズ構成オブジェクトを介して構成されます。
seriesDefaults: {
dragable: {
color: unknown, // データ ポイントをドラッグするとき、ドラッグ ラインとドラッグされたデータ ポイントの色
constrainTo: 'none', //ドラッグ範囲を設定します: 'x' (水平方向のみドラッグ)、
// 'y' (垂直方向のみドラッグ可能)、または 'none' (制限なし) ).
},
},
// ハイライター (ハイライト)
// ハイライト アクション オプション属性オブジェクトを設定します
// マウスが特定のデータ ポイントに移動すると、データポイントが増加し、プロンプト メッセージ ボックスが表示されます
//設定オブジェクトはオプション Configuration
highlighter: {
lineWidthAdjust: 2.5, //マウスが拡大されたデータ ポイント上に移動すると、拡大されたデータ ポイントの幅
// 現在は非ソリッド データ ポイントにのみ適用されます
sizeAdjust: 5, // マウスがデータ ポイント上に移動すると、データ ポイントの拡張の増分が増加します
showTooltip: true, // プロンプト情報バーを表示するかどうか
tooltipLocation: 'nw', // プロンプト情報の表示位置 (英語方向の頭文字): n、ne、e、se、s、sw、w、nw。
fadeTooltip: true, // プロンプト情報バーの表示と非表示を設定します (フェードインまたはフェードアウトするかどうか) )
tooltipFadeSpeed: "fast"// プロンプト情報バーがフェードインする速度を設定し、 out: low、def、fast、またはミリ秒単位の値
tooltipOffset: 2, // プロンプト情報バーが強調表示されます 表示されるデータ ポイントのオフセット位置 (ピクセル単位)。
tooltipAxes: 'both', // プロンプト情報ボックスには、データ ポイントの座標軸の値が表示されます。現在、水平/垂直/水平および垂直の 3 つのモードがあります。
//値は x、y、または xy です。
tooltipSeparator: ', ' // プロンプト情報バー内の異なる値間の分離記号
useAxesFormatters: true // の形式プロンプト情報ボックスにデータを表示しています。 座標軸上のデータの表示形式と一致していますか?
tooltipFormatString: '%.5P' // 前提条件となるプロンプト情報ボックスのデータ表示形式を設定するために使用されます。 is useAxesFormatters
// 現時点では、プロンプト ボックスのデータ形式は座標軸と一致していませんが、これに基づいています
//同時に、この属性もサポートされています。 html 形式文字列
//eg:'hello %.2f'
},

// LogAxisRenderer (指数レンダラー)
// このレンダラーには 2 つのプロパティしかありません。axesDefaults と axes 設定オブジェクトによって設定されます。

axesDefaults: {
base: 10, // インデックスの底
tickDistribution: 'even', // 座標軸の表示モード: 'even' または 'even'。座標
// 軸上に均等に分散された座標目盛り値を生成します。そして、'power' は増加する増分に基づいて座標軸上のスケールを決定します
},

// PieRenderer (円グラフの OPtion オブジェクトを設定します)
// 円の形状 グラフはseriesDefaults およびシリーズ構成オブジェクトを通じて構成されます

seriesDefaults: {
rendererOptions: {
diameter: undefine, // パイの直径を設定します
padding: 20, // パイの間の距離円とその分類 テーブルの直径を装った、名前ボックスまたはグラフの境界線間の距離 pie
sliceMargin: 20, // 円の各部分間の距離
fill:true, // を設定します円グラフの各部分の塗りつぶし状態
shadow:true, //円グラフの各部分の境界線に影を設定して、立体感を強調します
shadowOffset: 2, //その距離を設定します影の領域は円の各部分の境界からオフセットされます
shadowDepth: 5, // 影の領域の深さを設定します
shadowAlpha: 0.07 // 影の領域の透明度を設定します
}
},

//pointLabels (データ ポイント ラベル)
//データ ポイントの位置に関連情報を表示するために使用されます (プロンプト ボックスではありません)
seriesDefaults: {
pointLabels: {
location:'s',//データ点付近に表示されるデータラベルの位置
ypadding:2 //データラベルとデータ点の縦軸方向の距離
}
}

// トレンドライン (傾向線)
// 円グラフが渡されました seriesDefaults とシリーズ構成オブジェクトを構成します

seriesDefaults: {
trendline: {
show: true, // トレンドラインを表示するかどうか
color: '#666666', // トレンドラインの色
label: '', // トレンドライン名
type: 'linear', //トレンド ラインのタイプ 'linear' (直線)、'exponential' (べき乗値ライン)、または 'exp'
shadow: true, //grid と同じプロパティ設定
lineWidth: 1.5, //トレンド ラインwidth
shadowAngle: 45, // グリッドと同じプロパティ設定
shadowOffset: 1.5, // グリッドと同じプロパティ設定
shadowDepth: 3, // グリッドと同じ属性設定
shadowAlpha: 0.07 / / グリッドと同じ属性設定
}
}
}

後ろで使い方と簡単な例を説明します。