jqPlot チャート 中国語の API 使用法に関するドキュメント、ソース コード、およびオンラインの例_jquery

はじめに

jqplot は、jquery に基づいた非常に優れたグラフ プラグインです。この記事は主に、jqplot の中国語の使用方法、オンライン サンプル、およびソース コードのダウンロードを整理するのに役立ちます。 jqplot プラグインは、HTML5 をサポートするブラウザ上のキャンバスにグラフをレンダリングします。

スクリプト ファイルの紹介

jqplot には jquery バージョン 1.4.3 以降が必要です。今述べたように、jqplot は HTML5 Canvas をサポートするブラウザではキャンバスとしてレンダリングされます。 , IE9 以下のブラウザを使用している場合は、excanvas.js ファイルをインポートする必要があります。もちろん、jqplot の CSS ファイルも同時にインポートする必要があります。コードは次のとおりです。 >

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

プロット コンテナを追加します

div などの jqplot のコンテナをページに追加できますが、この div コンテナには幅と高さを指定する必要があることに注意してください。次のコードに示すように:

Startプロット チャートの作成

次に、上で作成します。たとえば、次のデータを使用して jqplot チャートを初期化すると、$.jqplot を呼び出すことでチャートが生成され、適切なコンテナーでレンダリングされます。 >$.jqplot('chartdiv', [[[1, 2],[ 3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]) ;

最終的な表示効果は以下のようになります:


jqplot 属性オプション
$.jqplot を呼び出すときに、いくつかのパラメーター オプションを渡して jqplot をカスタマイズできます。



コードをコピー

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

シリーズカラー: [ "#4bb2c5"、"#c5b47f"、"#EAA228"、"#579575"、"#839557"、"#958c12"、
"#953579"、"#4b5de4 ", "#d8b83f", "#ff5800", "#0085cc"], // デフォルトで表示されるカテゴリの色。カテゴリの数がここでの色の数を超える場合、
// キューの最初の位置から対応するカテゴリへの値の再割り当てを開始します。
stackSeries: false, // true に設定され、複数のカテゴリがある場合 (折れ線グラフの場合は、複数の折れ線が必要です)、各カテゴリ ( line)
//縦軸の値は、前のすべてのカテゴリの縦軸の値の合計と、その縦軸と横軸の値の合計です
title: '', //Set現在の画像のタイトル
title: {
text: '', //現在の画像のタイトルを設定します
show: true, //現在の画像のタイトルを表示するかどうかを設定します
},
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, // グリッドと同じ属性設定
shadowAlpha: 0.07 // グリッドと同じ属性設定
}
}
}

ここカスタム パラメーターの使用例:

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

$ .jqplot('chartdiv', [[[1, 2],[3 ,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]],
{ title :'指数線',
axes:{yaxis:{min: -10, max:240}},
series:[{color:'#5FAB78'}]
});

表示効果は次のとおりです:

ソース コードのダウンロード

http://www.jb51.net/jiaoben/35457.html 公式 Web サイト: http://www.jqplot.com/ 。