jqPlotグラフ中国語API使用ドキュメントおよびソースコードとオンライン例
11595 ワード
概要
jqplotはとても良いjqueryベースのグラフプラグインで、この文章は主にjqplotの中国語の使用説明とオンラインの例とソースコードのダウンロードを整理するのに役立ちます.jqplotプラグインは、HTML 5をサポートするブラウザでcanvasにグラフを表示します.
スクリプトファイルのインポート
jqplotには1.4.3以上のjqueryバージョンのサポートが必要です.先ほどお話ししたように、jqplotはHTML 5 Canvasをサポートするブラウザでcanvasで表示されます.そうしないと、IE 9以下のバージョンのブラウザでexcanvasを導入します.jsファイル、もちろん、jqplotのCSSファイルも同時に導入し、コードは以下の通りです.
plotコンテナを
ページにjqplotのdivなどのコンテナを できますが、このdivコンテナに の さを するには、 のコードに してください.
plotグラフの を
に、 で したコンテナで$を び す.jqplotは、jqplotグラフを のデータで するなど、グラフの とレンダリングを します.
$.jqplot('chartdiv', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);
な は の のようになります.
jqplotプロパティオプション
$を び しています.jqplotでは、jqplotを するパラメータoptionsからいくつかのパラメータoptionsを できます. のパラメータoptionsは のとおりです.
カスタムパラメータを する を します.
の のように されます.
ソースコードダウンロード//www.jb 51.net/jiaoben/35457.html
サイト:http://www.jqplot.com/.
jqplotはとても良いjqueryベースのグラフプラグインで、この文章は主にjqplotの中国語の使用説明とオンラインの例とソースコードのダウンロードを整理するのに役立ちます.jqplotプラグインは、HTML 5をサポートするブラウザでcanvasにグラフを表示します.
スクリプトファイルのインポート
jqplotには1.4.3以上のjqueryバージョンのサポートが必要です.先ほどお話ししたように、jqplotはHTML 5 Canvasをサポートするブラウザでcanvasで表示されます.そうしないと、IE 9以下のバージョンのブラウザでexcanvasを導入します.jsファイル、もちろん、jqplotのCSSファイルも同時に導入し、コードは以下の通りです.
plotコンテナを
ページにjqplotのdivなどのコンテナを できますが、このdivコンテナに の さを するには、 のコードに してください.
plotグラフの を
に、 で したコンテナで$を び す.jqplotは、jqplotグラフを のデータで するなど、グラフの とレンダリングを します.
$.jqplot('chartdiv', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);
な は の のようになります.
jqplotプロパティオプション
$を び しています.jqplotでは、jqplotを するパラメータoptionsからいくつかのパラメータoptionsを できます. のパラメータoptionsは のとおりです.
seriesColors: [ "#4bb2c5", "#c5b47f", "#EAA228", "#579575", "#839557", "#958c12",
"#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc"], // ， ，
//
stackSeries: false, // true （ ， ）， （ ）
// ，
title: '', //
title: {
text: '', //
show: true,//
},
axesDefaults: {
show: false, 。
min: null, ( )
max: null, ( )
pad: 1.2, ( )
ticks: [], // （ ） ， ticks
numberTicks: undefined,// ， （ ） ， （ ） = （ ） /(numberTicks-1)
renderer: $.jqplot.LinearAxisRenderer, // （ ）
rendererOptions: {}, // renderer Option ，
tickOptions: {
mark: 'outside', // ： : ， ， ; 'outside', 'inside' or 'cross'。
showMark: true, //
showGridline: true, //
markSize: 4, // （ ) mark 'cross', ，
， ×2
show: true, // ， ，
showLabel: true, //
formatString: '', // ，eg:'%b %#d, %Y' " ， "，"AUG 30,2008"
fontSize:'10px', //
fontFamily:'Tahoma', //
angle:40, // ，
fontWeight:'normal', //
fontStretch:1// （ ） ( )
}
showTicks: true, // ,
showTickMarks: true, //
useSeriesColor: true // （ ） ，
},
axes: {
xaxis: {
// same options as axesDefaults
},
yaxis: {
// same options as axesDefaults
},
x2axis: {
// same options as axesDefaults
},
y2axis: {
// same options as axesDefaults
}
},
seriesDefaults: {// ，
show: true, // （ ）.
xaxis: 'xaxis', // either 'xaxis' or 'x2axis'.
yaxis: 'yaxis', // either 'yaxis' or 'y2axis'.
label: '', // .
color: '', // （ ， ） .
lineWidth: 2.5, // （ ） .
shadow: true, // .
shadowAngle: 45, // grid .
shadowOffset: 1.25, // grid .
shadowDepth: 3, // grid .
shadowAlpha: 0.1, // Opacity of the shadow.
showLine: true, // （ ）
showMarker: true, //
fill: false, // （ ） legend
// ， fill true，
// showLine true，
fillAndStroke: false, // fill true ， （ ）
fillColor: undefined, //
fillAlpha: undefined, //
renderer: $.jqplot.PieRenderer, // （ PieRenderer）
//，
rendererOptions: {}, // option ， option ，
// Option 《jqPlot Option 》
// Option
markerRenderer: $.jqplot.MarkerRenderer, // renderer to use to draw the data
// point markers.
markerOptions: {
show: true, //
style: 'filledCircle', // ， "filledCircle"( ),
// circle，diamond, square, filledCircle，
// filledDiamond or filledSquare.
lineWidth: 2, // （ ， ， ）
size: 9, //
color: '#666666' //
shadow: true, // （ ）
shadowAngle: 45, // ，x
shadowOffset: 1, // grid
shadowDepth: 3, // grid
shadowAlpha: 0.07 // grid
}
isDragable: true,// （ dragable ）,
},
series:[
// ，
//eg.
//[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, // wether to draw lines across the grid or not.
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, // renderer to use to draw the grid.
rendererOptions: {} // options to pass to the renderer. Note, the default
// CanvasGridRenderer takes no additional options.
},
//jqPlot Option
// BarRenderer（ Option ）
// Option series seriesDefault
seriesDefaults: {
rendererOptions: {
barPadding: 8, // （px）
barMargin: 10, // （px）（ ）
barDirection: 'vertical', // ：
//， vertical or horizontal.
barWidth: null, //
shadowOffset: 2, // grid
shadowDepth: 5, // grid
shadowAlpha: 0.8, // grid
}
},
// Cursor( )
// ， ，
// ， zoom （ ）
// option
cursor: {
style: 'crosshair', // ， ， css
show: true, //
showTooltip: true, //
followMouse: false, // （ ）
tooltipLocation: 'se', // 。 followMouse=true,
// 。 ，
// ： n, ne, e, se, etc.
tooltipOffset: 6, // (followMouse=true) （followMouse=false）
showTooltipGridPosition: false,// （ ）
showTooltipUnitPosition: true,// （ ）
// ： showTooltipGridPosition ， ，
tooltipFormatString: '%.4P', // Highlighter tooltipFormatString
useAxesFormatters: true, // Highlighter tooltipFormatString
tooltipAxesGroups: [], // show only specified axes groups in tooltip. Would specify like:
// [['xaxis', 'yaxis'], ['xaxis', 'y2axis']]. By default, all axes
// combinations with for the series in the plot are shown.
},
// Dragable（ ）
// seriesDefaults series
seriesDefaults: {
dragable: {
color: undefined, // ，
constrainTo: 'none', // : 'x'（ ）,
// 'y'（ ）, or 'none'（ ）.
},
},
// Highlighter（ ）
// option
// ，
// option
highlighter: {
lineWidthAdjust: 2.5, // ，
//
sizeAdjust: 5, // ，
showTooltip: true, //
tooltipLocation: 'nw', // （ ）: n, ne, e, se, s, sw, w, nw.
fadeTooltip: true, // （ ）
tooltipFadeSpeed: "fast"// ： slow, def, fast, .
tooltipOffset: 2, // ， 。
tooltipAxes: 'both', // ， / / 。
// x, y or xy.
tooltipSeparator: ', ' //
useAxesFormatters: true //
tooltipFormatString: '%.5P' // ， useAxesFormatters
// false. ，
// ， html
//eg:'hello %.2f'
},
// LogAxisRenderer( )
// ， axesDefaults axes
axesDefaults: {
base: 10, //
tickDistribution: 'even', // ：'even' or 'power'. 'even'
// 。 'power'
},
// PieRenderer( OPtion )
// seriesDefaults series
seriesDefaults: {
rendererOptions: {
diameter: undefined, //
padding: 20, // ，
sliceMargin: 20, //
fill:true, //
shadow:true, // ，
shadowOffset: 2, //
shadowDepth: 5, //
shadowAlpha: 0.07 //
}
},
//pointLabels( )
// （ ）
seriesDefaults: {
pointLabels: {
location:'s',//
ypadding:2 //
}
}
// Trendline（ ）
// seriesDefaults series
seriesDefaults: {
trendline: {
show: true, //
color: '#666666', //
label: '', //
type: 'linear', // 'linear'（ ）, 'exponential'（ ） or 'exp'
shadow: true, // grid
lineWidth: 1.5, //
shadowAngle: 45, // grid
shadowOffset: 1.5, // grid
shadowDepth: 3, // grid
shadowAlpha: 0.07 // grid
}
}
}
カスタムパラメータを する を します.
$.jqplot('chartdiv', [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]],
{ title:'Exponential Line',
axes:{yaxis:{min:-10, max:240}},
series:[{color:'#5FAB78'}]
});
の のように されます.
ソースコードダウンロード//www.jb 51.net/jiaoben/35457.html
サイト:http://www.jqplot.com/.