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"> ;
簡単なテスト
