Jquery畫折線圖、柱狀圖、餅圖

 

1.今天作了一個折線圖，首先須要導js文件。這裏有一個demo：http://files.cnblogs.com/files/feifeishi/jquery_zhexiantubingtuzhuzhuangtu_demo.rar，裏邊有要用到的js文件。

個人折線圖用這兩個文件。這裏不能用jquery.js，沒有由於，沒有因此，那樣會出錯，主線不會顯示。

2.代碼

<div style="margin: 0 2em">
		<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
	</div>
	<script type="text/javascript">
    $(document).ready(function() {
    var xx = [];
    var yy = [];
      for (var i = 1; i <$('#table tr').length; i++) {                        
                        xx.push(parseFloat($('#table tr').eq(i).children("td").eq(0).text().trim()));
                        yy.push(parseFloat($('#table tr').eq(i).children("td").eq(2).text()));
                    }   
                    
                                   
                    console.log(xx);console.log(yy);
       var chart;
        chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line',
            marginRight: 220,
            marginBottom: 25
            },
         title: {
            text: '指標點達成度曲線線圖',
            x: -20 //center
            },
          xAxis: { //X軸數據
            categories: xx,
            },
          yAxis: { //Y軸顯示文字
            lineWidth: 2,
            title: {
                	text: '達成度'
                   }
           },
           tooltip: {
             formatter: function() {
                   return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + Highcharts.numberFormat(this.y, 0);
                    }
             },
           plotOptions: {
                column: {
                  dataLabels: {
                          enabled: true
                              },
                     enableMouseTracking: true //是否顯示title
                         }
                         },
             legend: {
                            layout: 'vertical',
                            align: 'right',
                            verticalAlign: 'top',
                            x: -20,
                            y: 200,
                            borderWidth: 2
                      },
              series: [{
                     name: '達成度',
                     data: yy
                      }]
            });      
        });

</script>

3.結果截圖

4.我的理解

首先jquery很強大，代碼封裝的功能很全，調用十分簡單。而後這個裏邊主要就是兩個數組x[]和y[]，將數據放到裏邊而後調用就能夠了。

 5.柱狀圖，須要在導一個js文件

<script src="js/exporting.js" type="text/javascript"></script>

　代碼：

$(document).ready(function() {
				    
				     var xx = [];
   					 var yy = [];
      				for (var i = 1; i <$('#table tr').length; i++) {                        
                        xx.push(parseFloat($('#table tr').eq(i).children("td").eq(0).text().trim()));
                        yy.push(parseFloat($('#table tr').eq(i).children("td").eq(2).text()));
                    }   
				                var chart;
				                chart = new Highcharts.Chart({
				                    chart: {
				                        renderTo: 'containerliuliang',
				                        //放置圖表的容器
				                        plotBackgroundColor: null,
				                        plotBorderWidth: null,
				                        defaultSeriesType: 'column' //圖表類型line, spline, area, areaspline, column, bar, pie , scatter 
				                    },
				                    title: {
				                        text: 'JQuery柱狀圖演示'
				                    },
				                    xAxis: { //X軸數據
				                        categories: xx,
				                        lineWidth: 2,
				                        labels: {
				                            align: 'right',
				                            style: {
				                                font: 'normal 13px 宋體'
				                            }
				                        }
				                    },
				                    yAxis: { //Y軸顯示文字
				                        lineWidth: 2,
				                        title: {
				                            text: '瀏覽量/次'
				                        }
				                    },
				                    tooltip: {
				                        formatter: function() {
				                            return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + Highcharts.numberFormat(this.y, 0);
				                        }
				                    },
				                    plotOptions: {
				                        column: {
				                            dataLabels: {
				                                enabled: true
				                            },
				                            enableMouseTracking: true //是否顯示title
				                        }
				                    },
				                    series: [{
				                        name: '總流量',
				                        data: yy
				                    }]
				                   
				                });
				                //$("tspan:last").hide(); //把廣告刪除掉
				         
				});      

結果截圖

6.餅圖

代碼：

(function($) { // encapsulate jQuery
    $(document).ready(function() {
       var xx = [];
   					 var yy = [];
      				for (var i = 1; i <$('#table tr').length; i++) {                        
                        xx.push(parseFloat($('#table tr').eq(i).children("td").eq(0).text().trim()));
                        yy.push(parseFloat($('#table tr').eq(i).children("td").eq(2).text()));
                    }   
                    var chart;
                    chart = new Highcharts.Chart({
                        chart: {
                            renderTo: 'container',
                            plotBackgroundColor: null,
                            plotBorderWidth: null,
                            plotShadow: false
                        },
                        title: {
                            text: '數據餅狀圖表'
                        },
                        tooltip: {
                            formatter: function() {
                                return '<b>' + this.point.name + '</b>: ' + this.percentage.toFixed(2) + ' %';
                            }
                        },
                        plotOptions: {
                            pie: {
                                allowPointSelect: true,
                                cursor: 'pointer',
                                dataLabels: {
                                    enabled: true,
                                    color: '#000000',
                                    connectorColor: '#000000',
                                    formatter: function() {
                                        return '<b>' + this.point.name + '</b>: ' + this.percentage.toFixed(2) + ' %';
                                    }
                                }
                            }
                        },
                        series: [{
                            type: 'pie',
                            name: 'pie',
                            data:   yy
                        }]
                    });
           
    });
})(jQuery);

結果截圖