jqPlot jqueryのページチャート描画tool_jquery

jqplot は基本的な jqplot.js ファイルに基づいており、複数の js ファイルでサポートされるプラグインがあります。つまり、jqplot.js ファイルは、円グラフ、ヒストグラム、その他のグラフィックの描画のみをサポートします。 .js およびその他のファイルを導入する必要があります。
ここでは、jqPlot の公式ドキュメントを参照し、円グラフを例として jqPlot の使用法を簡単に説明します。
最初のステップは、js ファイルを導入することです (線以外の他のグラフを描画している場合)グラフを作成するには、関連する js ファイルを導入する必要があります。円グラフ ファイル pieRenderer はここで紹介されています)

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

< ;!--[IE の場合]>

2 番目のステップは、チャート表示領域のコンテナを追加することです

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

3 番目のステップ、データを取得します

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

line1 = [ ['frogs', 3], ['buzzards', 7], ['deer', 2.5], ['turkeys' , 6], ['moles', 5], ['ground hogs', 4]];

4 番目のステップは、Option オブジェクトを構成してチャートを作成することです

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

$.jqplot('chart', [line1], {
title:'pieRenderer ',//円グラフのタイトルを設定します
seriesDefaults: {fill: true,
showMarker: false,
shadow: false,
renderer:$.jqplot. PieRenderer,
rendererOptions:{
diameter: unknown, // 円の直径を設定します
padding: 20, // 円とそのカテゴリ名ボックスまたはグラフの境界線の間の距離 (直径として偽装)円の
sliceMargin: 9, // 円の各部分間の距離
fill:true, // 円の各部分を部分的に塗りつぶした状態に設定します
shadow:true, // 影を設定します立体感を強調するために円の各部分の境界線を設定します
shadowOffset: 2, //円の各部分の境界線をオフセットするように影の領域を設定します distance
shadowDepth: 5, // 設定します影領域の深さ
shadowAlpha: 0.07 // 影領域の透明度を設定します
}
},
legend:{
show: true , // カテゴリ名かどうかを設定しますボックスが表示されます (つまり、すべてのカテゴリの名前が画像内の特定の位置に表示されます)
location: 'ne', // カテゴリ名ボックスが表示される位置, nw, n, ne, e, se, s, sw, w.
xoffset: 12, // カテゴリ名ボックスとグラフ領域の上端の間の距離 (単位 px)
yoffset: 12, // カテゴリ名ボックス間の距離グラフ領域の左の境界線 (単位 px)
}
})

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

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

"http://www.w3.org/TR/html4/loose.dtd"> ;

生成図表展示如下：

de life" alt="jqPlot——jquery ベースの页面图表绘制ツール - gaoyusi - 私の co

以下は、その他の種類の図の一部です:

1.多纵轴图

de life" alt="jqPlot——jquery ベースの页面图表绘制ツール - gaoyusi - 私の co

2.带示唆情報の甘特画像

de life" alt="jqPlot——jquery ベースの页面图表绘制ツール - gaoyusi - 私の co

3.表形式で表示される示唆情報の甘特図

de life" alt="jqPlot——jquery ベースの页面图表绘制ツール - gaoyusi - 私の co

4.带提示情報の回線状態図（可拖動）

de life" alt="jqPlot——jquery ベースの页面图表绘制ツール - gaoyusi - 私の co jqPlot 機能の特定のメディアについては、この後の文章、つまり jqPlot のオプション構成オブジェクトを参照してください。