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);
結果截圖
