使用流程：
1.引入相關的css，js文件
2.增加一個圖表展示區域的容器
3.獲取數據并執行加載
例如：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jqplot柱狀圖</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--[if IE]><script language="javascript" type="text/javascript" src="..\jqPlot\dist\excanvas.js" ></script><![endif]-->
<link rel="stylesheet" type="text/css" href="..\jqPlot\dist\jquery.jqplot.css" />
<script language="javascript" type="text/javascript" src="..\jqPlot\dist\jquery.js" ></script>
<script language="javascript" type="text/javascript" src="..\jqPlot\dist\jquery.min.js" ></script>
<script language="javascript" type="text/javascript" src="..\jqPlot\dist\jquery.jqplot.min.js" ></script>
<!-- plugin -->
<script type="text/javascript" src="..\jqPlot\dist\plugins\jqplot.barRenderer.js" ></script>
<script type="text/javascript" src="..\jqPlot\dist\plugins\jqplot.categoryAxisRenderer.js" ></script>
<script type="text/javascript" language="javascript">
$(function(){
line1 = [4, 2, 9, 16];
plot2 = $.jqplot('chart2', [line1], {
seriesDefaults: {
renderer: $.jqplot.BarRenderer, //使用柱狀圖表示
rendererOptions: {
barMargin: 30 //柱狀體組之間間隔
}
},
axes: {
xaxis: {
ticks:['區域1', '區域2', '區域3', '區域4'],
renderer: $.jqplot.CategoryAxisRenderer // x軸繪制方式
}
}
});
});
</script>
</head>
<body>
<span id="chart2" style="margin-top:20px; margin-left:20px; width:400px; height:240px;"></span>
</body>
</html>
<html>
<head>
<title>jqplot柱狀圖</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--[if IE]><script language="javascript" type="text/javascript" src="..\jqPlot\dist\excanvas.js" ></script><![endif]-->
<link rel="stylesheet" type="text/css" href="..\jqPlot\dist\jquery.jqplot.css" />
<script language="javascript" type="text/javascript" src="..\jqPlot\dist\jquery.js" ></script>
<script language="javascript" type="text/javascript" src="..\jqPlot\dist\jquery.min.js" ></script>
<script language="javascript" type="text/javascript" src="..\jqPlot\dist\jquery.jqplot.min.js" ></script>
<!-- plugin -->
<script type="text/javascript" src="..\jqPlot\dist\plugins\jqplot.barRenderer.js" ></script>
<script type="text/javascript" src="..\jqPlot\dist\plugins\jqplot.categoryAxisRenderer.js" ></script>
<script type="text/javascript" language="javascript">
$(function(){
line1 = [4, 2, 9, 16];
plot2 = $.jqplot('chart2', [line1], {
seriesDefaults: {
renderer: $.jqplot.BarRenderer, //使用柱狀圖表示
rendererOptions: {
barMargin: 30 //柱狀體組之間間隔
}
},
axes: {
xaxis: {
ticks:['區域1', '區域2', '區域3', '區域4'],
renderer: $.jqplot.CategoryAxisRenderer // x軸繪制方式
}
}
});
});
</script>
</head>
<body>
<span id="chart2" style="margin-top:20px; margin-left:20px; width:400px; height:240px;"></span>
</body>
</html>
1386
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
