Jquery.foat 生成饼状图，柱状图代码

调用Jquery,flot 直接生成饼状图；

前台代码：

  <div class="row-fluid">
                    <div class="span12">
                        <div class="box">
                            <div class="box-head">
                                <h3>图书相关统计图</h3>
                            </div>
                            <div>
                                
                            </div>
                            <div style="height: 15px; width: 500px;margin-left:500px;">
                                <div style="float:left;">书本种类:</div><div id="navicate" style="height: 15px; width: 40px; background-color: #2872bd;float:left"></div>
                                <div style="float:left;">书本总数:</div><div id="navicate" style="height: 15px; width: 40px; background-color: #666666; float: left; "></div>
                                <div style="float:left;">书本剩余:</div><div id="navicate" style="height: 15px; width: 40px; background-color: #feb900; float: left; "></div>
                            </div>
                            <div class="box-content">
                                <div class="flot flot-bar"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span12">
                        <div class="box">
                            <div class="box-head">
                                <h3>书籍种类统计图</h3>
                            </div>
                            <div class="box-content">
                                <div class="flot flot-pie"></div>
                            </div>
                        </div>
                    </div>
                </div>

js代码：

饼状图：

       //采用回调函数获取数据库的数据转成Json格式传给前台展示
$.get("/Book/getData", function (data, status) {
   var myjson = JSON.parse(data);
   $.plot($(".flot-pie"), myjson, options2);
});

条形图：

var dateX = [];
$.get("/Book/getAllCount", function (data, status) {
   $("#AllCount").val(data);
   var allCount = JSON.parse(data);
   var d1 = [];
   var d2 = [];
   var d3 = [];
   for (var i = 0; i < allCount.length; i += 1) {
       d1.push([i, parseInt(allCount[i].typeAll)]);
       dateX.push([i, allCount[i].type]); 
   }
   for (var i = 0; i < allCount.length; i += 1) {
       d2.push([i, parseInt(allCount[i].all)]);
   }
   for (var i = 0; i < allCount.length; i += 1) {
       d3.push([i, parseInt(allCount[i].remind)]);
   }




   var ds = new Array();


   ds.push({
       data: d1,
       bars: {
           show: true,
           barWidth: 0.2,
           order: 1,
           lineWidth: 2
       }
   });
   ds.push({
       data: d2,
       bars: {
           show: true,
           barWidth: 0.2,
           order: 2
       }
   });
   ds.push({
       data: d3,
       bars: {
           show: true,
           barWidth: 0.2,
           order: 3
           
       }
          });
   
   if ($('.flot-bar').length > 0) {
       $.plot($(".flot-bar"), ds, {
           xaxis: {
               ticks: dateX
           },
           grid: {
               hoverable: true,
               clickable: true
           }, colors: ['#2872bd', '#666666', '#feb900', '#128902', '#c6c12f']
       });
   }
});

读者测试可用代码;

var bookJson = [
{ label: "网络", "data": 10 },
{ label: "技术", "data": 30 },
{ label: "办公", "data": 20 },
];
if($(".flot-pie").length > 0){
   $.plot($(".flot-pie"), bookJson, options2);
}
var d1 = [];
for (var i = 0; i <= 10; i += 1)
d1.push([i, parseInt(Math.random() * 30)]);


var d2 = [];
for (var i = 0; i <= 10; i += 1)
d2.push([i, parseInt(Math.random() * 30)]);


var d3 = [];
for (var i = 0; i <= 10; i += 1)
d3.push([i, parseInt(Math.random() * 30)]);


var ds = new Array();


ds.push({
data:d1,
bars: {
show: true, 
barWidth: 0.2, 
order: 1,
lineWidth : 2
}
});
ds.push({
data:d2,
bars: {
show: true, 
barWidth: 0.2, 
order: 2
}
});
ds.push({
data:d3,
bars: {
show: true, 
barWidth: 0.2, 
order: 3
}
});


if($('.flot-bar').length > 0){
$.plot($(".flot-bar"), ds, {grid: {
hoverable: true,
clickable: true
},colors: [ '#2872bd', '#666666', '#feb900', '#128902', '#c6c12f']});
}