jqPlotグラフィックレポートプラグイン柱図(jquery)
http://hi.baidu.com/hemes1314/item/99ac8bd41093dfcc1b72b404より抜粋
jqplotはデフォルトで曲線図を作成します.柱状図を作成するにはpluginパッケージのプラグインjsを導入する必要があります.
一、いくつかの簡単な柱状図の例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>demo1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- jquery -->
<script type="text/javascript" src="../js/jquery-1.3.js"></script>
<!-- core -->
<script type="text/javascript" src="../jqplot/jquery.jqplot.js"></script>
<link rel="stylesheet" href="../jqplot/jquery.jqplot.css" type="text/css"></link>
<!--[if IE]><script language="javascript" type="text/javascript" src="../jqplot/excanvas.js"></script><![endif]-->
<!-- plugin -->
<script type="text/javascript" src="../jqplot/plugins/jqplot.barRenderer.js"></script>
<script type="text/javascript" src="../jqplot/plugins/jqplot.categoryAxisRenderer.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
line1 = [4, 2, 9, 16]; // 1
line2 = [3, 7, 6.25, 3.125]; // 2
//--
plot = $.jqplot('chart', [line1], {
seriesDefaults: {
renderer: $.jqplot.BarRenderer, //
rendererOptions: {
barMargin: 35 //
}
}
});
//--
plot1 = $.jqplot('chart1', [line1,line2], {
seriesDefaults: {
renderer: $.jqplot.BarRenderer, //
rendererOptions: {
barMargin: 35 //
}
}
});
//--
plot2 = $.jqplot('chart2', [line1,line2], {
seriesDefaults: {
renderer: $.jqplot.BarRenderer, //
rendererOptions: {
barMargin: 10 //
}
},
axes: {
xaxis: {
ticks:[' 1', ' 2', ' 3', ' 4'],
renderer: $.jqplot.CategoryAxisRenderer //x
}
}
});
});
</script>
</head>
<body>
<span id="chart" style="margin-top:20px; margin-left:20px; width:400px; height:240px;"></span>
<span id="chart1" style="margin-top:20px; margin-left:20px; width:400px; height:240px;"></span>
<span id="chart2" style="margin-top:20px; margin-left:20px; width:400px; height:240px;"></span>
</body>
</html>効果:
二、ヒントマウスの位置座標を実現し、カテゴリヒントボックス<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>demo2.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- jquery -->
<script type="text/javascript" src="../js/jquery-1.3.js"></script>
<!-- core -->
<script type="text/javascript" src="../jqplot/jquery.jqplot.js"></script>
<link rel="stylesheet" href="../jqplot/jquery.jqplot.css" type="text/css"></link>
<!--[if IE]><script language="javascript" type="text/javascript" src="../jqplot/excanvas.js"></script><![endif]-->
<!-- plugin -->
<!-- -->
<script type="text/javascript" src="../jqplot/plugins/jqplot.barRenderer.js"></script>
<!-- -->
<script type="text/javascript" src="../jqplot/plugins/jqplot.categoryAxisRenderer.js"></script>
<!-- 、 -->
<script type="text/javascript" src="../jqplot/plugins/jqplot.canvasTextRenderer.js"></script>
<script type="text/javascript" src="../jqplot/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
<!-- -->
<script type="text/javascript" src="../jqplot/plugins/jqplot.cursor.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
line1 = [[' 1',610], [' 2',220], [' 3',530], [' 4',340]]; // 1
line2 = [[' 1',520], [' 2',420], [' 3',730], [' 4',240]]; // 2
//--
plot = $.jqplot('chart', [line1], {
title: ' ',
seriesDefaults: {
renderer: $.jqplot.BarRenderer, //
rendererOptions: {
barMargin: 30 //
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer, //x
label: 'X',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
yaxis: {
min: 0, //y
//max: 650, //y
//numberTicks:6, //
tickInterval: 200, //
label: 'Y',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
}
}
});
plot1 = $.jqplot('chart1', [line1,line2], {
title: ' ',
legend: {show: true, location: 'ne'}, // --show： ,location: (e: ,w: ,s: ,n: ,nw: ,ne: ,sw: ,se: )
series: [{label: ' 1'}, {label: ' 2'}], //
seriesDefaults: {
renderer: $.jqplot.BarRenderer, //
rendererOptions: {
barMargin: 20 //
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer //x
},
yaxis: {
min: 0, //y
tickInterval: 200 //
}
},
cursor: {
style: 'crosshair', // ， ， css
show: true, //
showTooltip: true, //
followMouse: false, // （ ）
tooltipLocation: 'nw', //
tooltipOffset: 6, // (followMouse=true) （followMouse=false）
showTooltipGridPosition: false,// （ ）
showTooltipUnitPosition: true// （ ）
}
});
});
</script>
</head>
<body>
<span id="chart" style="margin-top:20px; margin-left:20px; width:400px; height:240px;"></span>
<span id="chart1" style="margin-top:20px; margin-left:20px; width:400px; height:240px;"></span>
</body>
</html>効果図:
