jqPlotオプション設定object_jqueryの詳細説明

ここではjqPlotのコア部分であるオプション設定オブジェクトを中心に紹介します。同時に、jqplot の各レンダラーについても簡単に紹介します。
ここでは主に jqPlot の公式 Web サイトにある Option の紹介を参照し、私自身の簡単な実践と理解を使って Option の関連する属性を説明します。不適切な箇所や間違っている箇所があれば修正してください。

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

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: '', // カテゴリ名ボックスに表示されるカテゴリに使用されます。 Name
color: '', // 表現される分類の色アイコン内 (割引、棒グラフなど)
lineWidth: 2.5, // 分類グラフ (特に折れ線グラフ) の幅
shadow: true, // 各グラフに影の領域を表示するかどうかチャート
shadowAngle: 45, // グリッド内の同じパラメータを参照します
shadowOffset: 1.25, // グリッド内の同じパラメータを参照します
shadowDepth: 3, // 同じパラメータを参照しますグリッド内
shadowAlpha: 0.1, // グリッド内の同じパラメータを参照
showLine: true, // チャートにポリラインを表示するかどうか (折れ線グラフのポリライン)
showMarker: true, // グラフ内のデータ ノードを強調表示するかどうか
fill: false, // グラフ内のポリラインの下の領域を塗りつぶすかどうか (塗りつぶしの色はポリラインの色と同じです)、および凡例によって設定されたカテゴリ名ボックス内のカテゴリ
//これ fill が true の場合、
//showLine が true である必要があることに注意してください。そうでない場合、効果は表示されません
fillAndStroke: false, //When fill が true の場合、塗りつぶし領域の上部に線が表示されます (折れ線グラフの場合は線が表示されます)
fillColor: undefine, // 塗りつぶし領域の色を設定します
fillAlpha: unknown, // 塗りつぶされた領域の透明度を設定します
renderer: $.jqplot.PieRenderer, // レンダラ (ここでは円グラフ PieRenderer) を使用して既存のグラフをレンダリングします
// それにより、グラフをrequired chart
rendererOptions: {}, // 前の属性オブジェクトによって設定されたオプションをレンダラーに渡します。折れ線グラフのレンダラーにはオプション オブジェクトがありません。
// 異なるオプション構成オブジェクトの場合。チャートについては、次の「jqPlot のさまざまなプラグインのオプション オブジェクト設定」を参照してください。
//各チャートの設定オプション オブジェクト
markerRenderer: $.jqplot.MarkerRenderer, // 描画に使用するレンダラーdata
// ポイント マーカー。
markerOptions: {
show: true, // グラフにデータ ポイントを表示するかどうか
style: 'filledCircle', // 各データ ポイントの表示方法グラフでは、デフォルトは "filledCircle" (塗りつぶされた円)、
//その他のいくつかの方法、circle、diamond、square、filledCircle、
//filledDiamond またはfilledSquare。
lineWidth: 2、//データ ポイントの各辺の幅 (設定が大きすぎると、各辺が繰り返され、実線の点と同様の表示になります)
size: 9, // データ ポイントのサイズ
color: '#666666' // データ ポイントの色
shadow: true, // データ ポイントのシャドウ領域を表示するかどうか (立体感を高める)
shadowAngle: 45, // シャドウ ゾーンの角度、x 軸時計回り
shadowOffset: 1, // グリッド内の同じパラメータを参照します
shadowDepth: 3, // グリッド内の同じパラメータを参照します
shadowAlpha: 0.07 // グリッド内の同じパラメータを参照しますGrid
}
isDragable: true, //ドラッグが許可されているかどうか (ドラッグ可能なパッケージが導入されている場合)、デフォルトでドラッグ可能
},
series:[//複数のカテゴリがある場合表示する必要がある場合は、ここで各カテゴリの関連する構成プロパティを設定します
//例: カテゴリ名ボックスに各カテゴリのカテゴリ名を設定します
//[label: 'Traps Division'},{label: 'Decoy Division'},{label: 'Harmony Division'}]
//構成パラメータの設定は seriesDefaults と同じです
],
legend: {
show: false, // カテゴリ名ボックスが表示されるかどうかを設定します (つまり、すべてのカテゴリの名前が画像内の特定の位置に表示されます)
location: 'ne', // カテゴリ名ボックスが表示される位置, nw, n , ne, e, se, s, sw, w.
xoffset: 12, // カテゴリ名ボックスとグラフ領域の上端との距離 (単位 px)
yoffset: 12, //カテゴリ名ボックスとグラフ領域の左端との距離 (単位 px)
background:'' //カテゴリ名ボックスの背景色距離グラフ領域
textColor:'' //カテゴリ名ボックスグラフ領域内の距離のフォントの色
..その他のスタイルのデザインについては、公式ドキュメントを参照してください
},
grid: {
drawGridLines: true, // グリッドを横切る線を描画するかどうか
gridLineColor: '#cccccc' // アイコン領域全体のグリッドの背景線の色を設定します。
background : '#fffdf6', // グラフ領域全体の背景色を設定します
borderColor: '#999999', // グラフの (最も外側の) 境界線の色を設定します
borderWidth: 2.0, // グラフの (最も外側の) 境界線の幅を設定します
shadow: true, // の影を設定しますアイコン全体 (最も外側) の境界線を使用して、3 次元効果を強調します。
shadowAngle: 45, // X 軸から時計回りに影の領域の角度を設定します。 方向回転
shadowOffset: 1.5, //画像の境界線からのシャドウ領域のオフセット距離
shadowWidth: 3, // シャドウ領域の幅を設定します
shadowDepth: 3, // オーディオ領域とビデオ領域の重なり合うシャドウを設定します Amount
shadowAlpha : 0.07 // シャドウ領域の透明度を設定します
renderer: $.jqplot.CanvasGridRenderer, // グリッドの描画に使用するレンダラー
rendererOptions: {} // レンダラーに渡すオプション。デフォルトの
// CanvasGridRenderer は追加のオプションを必要としません。
},
/**************************さまざまな jqPlot プラグインのオプション オブジェクト設定***************** ******* **********/
// BarRenderer (ヒストグラムの Option オブジェクトを設定します)
/ /Thisオプション オブジェクトは、ヒストグラムのシリーズおよび seriesDefault プロパティに関連する構成オブジェクト設定に適用されます。
seriesDefaults: {
rendererOptions: {
barPadding: 8, //同じカテゴリの 2 つの柱状バー間の距離を設定します ( px)
barMargin: 10, //異なるカテゴリの 2 つの柱状バー間の距離 (px) を設定します (同じ横軸上にあります)
barDirection: 'vertical', // ヒストグラムを設定します 表示方向: 垂直表示および水平表示
//、デフォルトの垂直表示は垂直または水平です。
barWidth: null, // ヒストグラムの各列バーの幅を設定します。
shadowOffset: 2, // と同じ属性設定です。 Grid
shadowDepth: 5, // Grid
shadowAlpha と同じ属性設定: 0.8, // Grid
と同じ属性設定}
},
// Cursor(cursor )
// マウスが画像内に移動すると、画像内にマウスが表示されます。
// また、ズームを設定すると、画像内の特定の領域を拡大することができます。このプロパティの関連プロパティ。ドリル (選択した領域を拡大)
//この設定オブジェクトは、option
cursor: {
style: 'crosshair', // マウスが移動したとき画像の上、マウスの表示 Style、属性値は css class
show: true, //カーソルを表示するかどうか
showTooltip: true, //プロンプト情報バーを表示するかどうか
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: undefine, / / データ ポイントをドラッグするとき、ドラッグ ラインとドラッグ データ ポイントの色
constrainTo: 'none', / /ドラッグ範囲を設定します: 'x' (水平方向のみドラッグ可能)、
// 'y' (垂直方向のみドラッグ可能)、または 'none' (無制限)
}、
} ,
// ハイライター (ハイライト)
// ハイライト アクション オプション属性オブジェクトを設定します
// マウスが特定のデータ ポイントに移動すると、データ ポイントが増加し、プロンプト メッセージ ボックスが表示されます
//設定オブジェクトは、オプション
highlighter: {
lineWidthAdjust: 2.5, //マウスが拡大されたデータ ポイント上に移動すると、拡大されたデータ ポイントの幅を設定します
//現在、非ソリッド データ ポイントにのみ適用されます
sizeAdjust: 5, // マウスがデータ ポイントに移動すると、データ ポイントの拡張の増分
showTooltip: true, // プロンプト情報バーを表示するかどうか
tooltipLocation: 'nw', // プロンプト情報の表示位置(英語方向)の頭文字): n, ne, e, se, s, sw, w, nw.
fadeTooltip: true, // 設定プロンプト情報バーの表示と非表示の方法 (フェードインまたはフェードアウト)
tooltipFadeSpeed: "fast"//プロンプト情報バーのフェードインおよびフェードアウトの速度を設定します: 遅い、デフォルト、速い、またはミリ秒単位の値。
tooltipOffset: 2, // プロンプト情報バーのシフト位置で強調表示されたデータ ポイントのオフセット (ピクセル単位)。
tooltipAxes: 'both', // プロンプト情報ボックスには、データ ポイントの座標軸の値が表示されます。現在、水平/垂直/水平および垂直の 3 つのモードがあります。
//値は x、y、または xy です。
tooltipSeparator: ', ' // プロンプト情報バー内の異なる値間の分離記号
useAxesFormatters: true // の形式プロンプト情報ボックスにデータを表示しています。 座標軸上のデータの表示形式と一致していますか?
tooltipFormatString: '%.5P' // 前提条件となるプロンプト情報ボックスのデータ表示形式を設定するために使用されます。 is useAxesFormatters
// 現時点では、プロンプト ボックスのデータ形式は座標軸と一致していませんが、これに基づいています
//同時に、この属性もサポートされています。 html 形式文字列
//例:'hello '
},
// LogAxisRenderer (指数レンダラー)
// このレンダラーには、axesDefaults および Axes 構成オブジェクトを通じて構成されます。
axesDefaults: {
base: 10, // インデックスのベース
tickDistribution: 'even', // 座標軸表示モード: 'even' または 'even' は、座標
上に均等に分散された座標スケール値を生成します。 //軸。そして、'power' は増加する増分に基づいて座標軸のスケールを決定します
},
// PieRenderer (円グラフの OPtion オブジェクトを設定します)
// 円グラフは seriesDefaults を渡します。シリーズ構成オブジェクト
seriesDefaults: {
rendererOptions: {
diameter: unknown, // 円グラフの直径を設定します
padding: 20, // 円グラフとそのカテゴリ名ボックスの間の距離、またはchart border Distance、円の直径を偽装
sliceMargin: 20, // 円の各部分間の距離
fill:true, // 円の各部分の塗り潰し状態を設定
shadow:true , //立体感を強調するために円の各部分の境界線に影を設定します
shadowOffset: 2, //各部分の境界線から影の領域をオフセットする距離を設定します円の
shadowDepth: 5, // 影領域の深さを設定します
shadowAlpha: 0.07 // 影領域の透明度を設定します
}
},
//pointLabels ( data point labels)
//データ ポイントの配置に使用します 関連情報を表示します (プロンプト ボックスではありません)
seriesDefaults: {
pointLabels: {
location:'s',//データ ラベルを表示しますデータ点付近の位置
ypadding:2 //Data ラベルとデータ点の縦軸方向の距離
}
}
// Trendline (傾向線)
// 円グラフは seriesDefaults および系列設定オブジェクトを通じて設定されます
seriesDefaults: {
trendline: {
show: true, // 傾向線を表示するかどうか
color: '#666666', // トレンド ラインの色
label: '', // トレンド ラインの名前
type: 'linear', // トレンド ラインのタイプ 'linear' (直線)、'exponential' (累乗値ライン) または ' exp'
shadow: true, // Grid
lineWidth と同じ属性設定 : 1.5, // トレンドラインの幅
shadowAngle: 45, // Grid
shadowOffset と同じ属性設定: 1.5, / / グリッドと同じ属性設定
shadowDepth: 3, // グリッドと同じ属性設定
shadowAlpha: 0.07 // グリッドと同じ属性設定
}
}
}

関連レンダラーの紹介

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

1.dateAxisRenderer
関連参照パッケージ: このツールは主に、日付形式でスケール付きの座標軸を表示するために使用され、JavaScript のローカル データ処理機能を強化し、ほぼすべての日付形式をサポートします。
さらに、レンダラーは強力な書式設定機能も提供しており、データ内の日付文字列を必要な形式に書式設定し、座標軸の目盛り上に表示できます。
2.categoryAxisRenderer
関連参照パッケージ: このレンダラーは主に使用されます。目盛上の値はある時点の値を表し、ある範囲内の値を表すため、目盛上の値の表示と2つの目盛上の値の表示では、当然意味が変わります。
このレンダラーは、ヒストグラムと組み合わせて使用​​するのに適しています。
3.barRenderer
関連参照パッケージ: このレンダラは主に使用されます。ヒストグラムを表示する場合、レンダラーは各グループ (スケール値での各カテゴリ) 内および間の距離を適切に制御でき、ヒストグラムを水平に表示できます。
4.cursor
関連参照パッケージ: