jquery jqPlot API 中国語の使い方チュートリアル (非常に強力なグラフ作成ツール)_jquery

jqPlot は、曲線、縦棒グラフ、円グラフを含む非常に強力なグラフ作成ツールです。さらに、呼び出しも簡単です~~
公式 Web サイト: http://www.jqplot.com/
これは中国語のチュートリアルです。基本的にすべての API が完成しています。必要な子供たちに見てもらい、さらに重要なことに、自分で集めてください~~そうそう~
JqPlot 全体として、必要な場所が 3 つあります。設定する必要があります。形式は次のとおりです:
$.jqplot(‘target’, data, options); target: 表示する位置。データ: 表示されるデータ。オプション: その他の構成
シリーズカラー: [ "#4bb2c5"、"#c5b47f"、"#EAA228"、"#579575"、"#839557"、"#958c12"、
"#953579"、"# 4b5de4", "#d8b83f", "#ff5800", "#0085cc"], // デフォルトで表示される分類色。分類数がここでの色数を超える場合、値は先頭の位置からリセットされます。 queue. 対応するカテゴリに割り当てます
stackSeries: false, // true に設定され、複数のカテゴリがある場合 (折れ線グラフの場合は複数の折れ線が必要です)、各カテゴリの値 (折れ線) ) 縦軸上のすべての前のカテゴリの縦軸値の合計と縦軸値の合計 (例: 現在のカテゴリの縦軸値は Y​​3

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

title: '', //現在の画像のタイトルを設定します
title: {
text: '', //現在の画像のタイトルを設定します
show: true, //現在の画像を設定します。Figure のタイトルに
} を表示するかどうか、
axesDefaults: {
show: false、座標軸を自動的に表示するかどうかを設定します。
min: null、水平 (垂直) 軸の最小スケール値
max: null、水平 (垂直) 軸の最大スケール値
pad: 1.2、水平方向の増加係数 (垂直) 軸スケール値
ティック: [], //水平 (垂直) 座標スケールの値を設定します。これはティック配列の値にすることができます
numberTicks: 未定義,// 分割係数、使用されます水平 (垂直) 座標スケール間隔を設定するには、水平 (垂直) 座標スケール間隔値 ​​= 水平 (垂直) 座標間隔の長さ/(numberTicks-1)
renderer: $.jqplot.LinearAxisRenderer, // レンダラーを設定します水平（垂直）軸にデータを読み込みます
rendererOptions: {}, // レンダラーのオプション構成オブジェクトを設定します。
tickOptions: {
mark: 'outside ', // 座標軸上のスケールの表示モードを設定します: 分: 座標軸の外側表示、内側表示、およびスルー表示です。値はそれぞれ '外側'、'内側'、または '十字'です。
showMark: true, //スケールを表示するかどうかを設定します
showGridline: true, // チャートエリアにスケール値の方向にグリッドを表示するかどうかを設定します
markSize: 4, //各目盛りの頂点と目盛りの間の距離 座標軸上の点間の距離 (ピクセル単位) マーク値が「cross」の場合、各目盛りには上部の頂点と下部の頂点が交差します。目盛りの真ん中に座標軸
を置き、この Distance×2
show: true, //目盛り、目盛りと同じ方向のグリッド線、スケール値を表示するかどうか座標軸上の
showLabel: true, //目盛りと座標軸の表示有無 軸上のスケール値
formatString: '', //座標軸上のスケール値の表示形式を設定,例:'%b %#d, %Y' は、「月、日、年」、「AUG 30,2008」という形式を意味します
fontSize:'10px', //スケール値のフォント サイズ
fontFamily:'Tahoma', //スケール値上のフォント
angle:40, //スケール値と座標軸の間の角度、角度は座標軸の正の時計回り方向です
fontWeight:' Normal', //フォントの太さ
fontStretch:1//スケール値の方向(座標軸の外側)への伸び(ストレッチ)の度合い
}
showTicks: true, / /座標軸に目盛りとスケール値を表示するかどうか、
showTickMarks: true, //目盛りを表示するかどうかを設定します
useSeriesColor: true //縦(横)の座標軸が複数ある場合、このプロパティを使用して、これらの座標軸を異なる色で表示するかどうかを設定します
},
axes: {
xaxis: {
// axesDefaults と同じオプション
},
yaxis: {
// axesDefaults と同じオプション
},
x2axis: {
// axesDefaults と同じオプション
},
y2axis: {
// axesDefaults と同じオプション
}
},
seriesDefaults: {//複数のカテゴリがある場合、この構成属性を通じて各カテゴリの共通属性を設定できます
show: true, //チャート領域全体 (つまり、チャート内のコンテンツの表示)。
xaxis: 'xaxis', // 'xaxis' または 'x2axis'。
yaxis: 'yaxis', // 'yaxis'。または 'y2axis'。
label: '', // カテゴリ名ボックスに表示するために使用されるカテゴリ名。
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, //fill が true の場合、線が表示されます塗りつぶし領域の上部 (折れ線グラフの場合は折れ線が表示されます)
fillColor: undefine, //塗りつぶし領域を設定します Color
fillAlpha: unknown, // 塗りつぶし領域の透明度を設定します
renderer: $.jqplot.PieRenderer, // レンダラー (ここでは円グラフ PieRenderer が使用されています) を使用して既存のチャートをレンダリングします
// したがって、必要なチャートに変換されます
rendererOptions: {} , // 前の属性で設定したレンダラーのオプションオブジェクトを渡します。折れ線グラフのレンダラーにはオプションオブジェクトがありません。
// 別のチャートのオプションオブジェクトの設定を参照してください。さまざまな jqPlot プラグイン"
// 各チャートの構成オプション オブジェクト
markerRenderer: $.jqplot.MarkerRenderer, // データの描画に使用するレンダラー
// マーカーをポイントします。
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 // グリッド内の同じパラメータを参照
}
isDragable: true, //ドラッグが許可されているかどうか (ドラッグ可能なパッケージが導入されている場合) 、デフォルトでドラッグ可能
},
series:[
//表示する必要があるカテゴリが複数ある場合は、ここに各カテゴリの関連する設定プロパティを入力します
//例: 各カテゴリのカテゴリ名をカテゴリ名ボックスに設定します
//[label: 'Traps Division'},{label: 'Decoy Division'},{label: 「ハーモニー部門」}]//構成パラメータの設定は 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, //アイコン全体の (最も外側の) 境界線に影を設定して、立体感を強調します
shadowAngle: 45, //影領域の角度、x 軸から時計回りに回転
shadowOffset: 1.5, // 画像の境界線から影領域のオフセット距離を設定します
shadowWidth: 3, // 影領域の幅を設定します
shadowDepth: 3, // オーディオおよびビデオ領域で重なるシャドウの数を設定します
shadowAlpha: 0.07 // シャドウ領域の透明度を設定します
renderer: $.jqplot.CanvasGridRenderer, // レンダラー
rendererOptions: {} // レンダラーに渡すオプション。デフォルトの
// CanvasGridRenderer には追加のオプションはありません。
}、
//Option オブジェクト。さまざまな jqPlot プラグインの設定
//BarRenderer (ヒストグラムの Option オブジェクトの設定)
//この Option オブジェクトは、ヒストグラムのシリーズおよび seriesDefault プロパティに関連する構成オブジェクト設定に適用されます
seriesDefaults : {
rendererOptions: {
barPadding: 8, //同じカテゴリの 2 つの柱状バー間の距離 (px) を設定します
barMargin: 10, // 2 つの柱状バー間の距離 (px) を設定します異なるカテゴリ (同じ水平座標テーブル点)
barDirection: 'vertical', //ヒストグラム表示の方向を設定します: 垂直表示と水平表示
//、デフォルトの垂直表示は垂直または水平です。 🎜>barWidth: null, // ヒストグラムの各列バーの幅を設定します
shadowOffset: 2, // グリッドと同じ属性設定
shadowDepth: 5, // グリッドと同じ属性設定
shadowAlpha : 0.8, // グリッド属性の設定と同じ
}
},
// カーソル(カーソル)
// 画像上にマウスを移動すると、画像内にマウスが表示されます。これは、ハイライト機能
と一緒に使用されることがよくあります。 //さらに、このプロパティのズーム関連プロパティを設定することで、画像内の特定の領域にドリルダウンします (選択した領域をズームインします)。
//これ。設定オブジェクトはオプション
cursor: {
style: 'crosshair', //マウスが画像上に移動したときのマウスの表示スタイルは、css クラス
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 形式文字列
//eg:'hello %.2f'
},
// LogAxisRenderer (Exponential renderer)
// このレンダラーには 2 つのプロパティしかありません。axesDefaults と Axes 構成オブジェクトを通じて構成されます。 axesDefaults: {
base: 10, // 指数の底
checkDistribution: 'even', // 座標軸表示モード: 'even' または 'power' は座標ティック値を生成します。座標
// 軸上に均等に分散されます。そして、'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 (データ ポイント ラベル)
//データ ポイントの配置に使用されます。関連情報を表示します (プロンプト ボックスではありません)。
seriesDefaults: {
pointLabels: {
location:'s',//データ ラベルはデータの近くの位置を表示しますpoint
ypadding:2 //Data 縦軸方向のラベルとデータポイント間の距離
}
}
// Trendline (傾向線)
// 円グラフseriesDefaults およびシリーズ設定オブジェクトを通じて設定されます
seriesDefaults: {
trendline: {
show: true, // 傾向線を表示するかどうか
color: '#666666', // 傾向線の色
label: '', // トレンド ライン名
type: 'linear', // トレンド ラインのタイプ 'linear' (直線)、'exponential' (べき乗値ライン) または 'exp'
shadow: true, // グリッドと同じ属性設定
lineWidth : 1.5, // トレンドラインの幅
shadowAngle: 45, // グリッドと同じ属性設定
shadowOffset: 1.5, // と同じ属性設定Grid
shadowDepth: 3, // Grid と同じ属性設定
shadowAlpha: 0.07 // Grid
と同じ属性設定}
}
}