jqPlotオプション設定object_jqueryの詳細説明-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 06:49 PM

ここでは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 // グリッドと同じ属性設定
} 
} 
} 

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7410

Java チュートリアル

1631

CakePHP チュートリアル

1358

Laravel チュートリアル

1268

PHP チュートリアル

1218

Related knowledge

JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScript文字列置換法とFAQの詳細な説明この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します：内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します最も直接的な方法は、置換（）メソッドを使用することです。 str = str.replace（ "find"、 "置換"）; この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace（/fi

独自のAjax Webアプリケーションを構築します Mar 09, 2025 am 12:11 AM

それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか？ Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました

10 jQueryの楽しみとゲームプラグイン Mar 08, 2025 am 12:42 AM

10の楽しいjQueryゲームプラグインして、あなたのウェブサイトをより魅力的にし、ユーザーの粘着性を高めます！ Flashは依然としてカジュアルなWebゲームを開発するのに最適なソフトウェアですが、jQueryは驚くべき効果を生み出すこともできます。また、純粋なアクションフラッシュゲームに匹敵するものではありませんが、場合によってはブラウザで予期せぬ楽しみもできます。 jquery tic toeゲームゲームプログラミングの「Hello World」には、JQueryバージョンがあります。ソースコード jQueryクレイジーワードコンポジションゲームこれは空白のゲームであり、単語の文脈を知らないために奇妙な結果を生み出すことができます。ソースコード jquery鉱山の掃引ゲーム

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか？ Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

jQuery Parallaxチュートリアル - アニメーションヘッダーの背景 Mar 08, 2025 am 12:39 AM

このチュートリアルでは、jQueryを使用して魅惑的な視差の背景効果を作成する方法を示しています。見事な視覚的な深さを作成するレイヤー画像を備えたヘッダーバナーを構築します。更新されたプラグインは、jQuery 1.6.4以降で動作します。ダウンロードしてください

jqueryとajaxを使用した自動更新Divコンテンツ Mar 08, 2025 am 12:58 AM

この記事では、JQueryとAjaxを使用して5秒ごとにDivのコンテンツを自動的に更新する方法を示しています。この例は、RSSフィードからの最新のブログ投稿と、最後の更新タイムスタンプを取得して表示します。読み込み画像はオプションです

Matter.jsを始めましょう：はじめに Mar 08, 2025 am 12:53 AM

Matter.jsは、JavaScriptで書かれた2D Rigid Body Physics Engineです。このライブラリは、ブラウザで2D物理学を簡単にシミュレートするのに役立ちます。剛体を作成し、質量、面積、密度などの物理的特性を割り当てる機能など、多くの機能を提供します。また、重力摩擦など、さまざまな種類の衝突や力をシミュレートすることもできます。 Matter.jsは、すべての主流ブラウザをサポートしています。さらに、タッチを検出し、応答性が高いため、モバイルデバイスに適しています。これらの機能はすべて、物理ベースの2Dゲームまたはシミュレーションを簡単に作成できるため、エンジンの使用方法を学ぶために時間をかける価値があります。このチュートリアルでは、このライブラリのインストールや使用法を含むこのライブラリの基本を取り上げ、