正文
jquery图表插件,前端图表插件
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
jquery图表插件highcharts软件的使用小技巧
当我们使用highcharts做这样的图是不是很老火，其实开始我感觉很麻烦。但是官网上有demo，虽然只有很小一部分。基本百度一下就可以找到加入曲线。其实就是
serese
的数据，只是加入type属性就更改成你想要的。下面那个table你可以使用table加入jquery实现就ok了
$(function
()
{
$('#container').highcharts({
chart:
{
type:
'column'
},
title:
{
text:
'Stacked
column
chart'
},
xAxis:
{
gridLineWidth:1,
plotOptions:
{
column:
{
pointPadding:
0.2,
pointWidth:
30
//柱子的宽度30px
}
},
//tickPixelInterval:100,
categories:
['Apples',
'Oranges',
'Pears',
'Grapes',
'Bananas']
},
yAxis:
{
tickPositions:
[0,
100,
200,
300,
400,500],//设置刻度
min:
0,
title:
{
text:
'Total
fruit
consumption'
},
stackLabels:
{
enabled:
true,
style:
{
fontWeight:
'bold',
color:
(Highcharts.theme
Highcharts.theme.textColor)
||
'gray'
}
}
},
legend:
{
align:
'right',
x:
-100,
verticalAlign:
'top',
y:
20,
floating:
true,
backgroundColor:
(Highcharts.theme
Highcharts.theme.legendBackgroundColorSolid)
||
'white',
borderColor:
'#CCC',
borderWidth:
1,
shadow:
false
},
tooltip:
{
formatter:
function()
{
return
'b'+
this.x
+'/bbr/'+
this.series.name
+':
'+
this.y
+'br/'+
'Total:
'+
this.point.stackTotal;
}
},
plotOptions:
{
column:
{
stacking:
'normal',
pointWidth:
30
,
//柱子的宽度30px
dataLabels:
{
enabled:
true,
color:
(Highcharts.theme
Highcharts.theme.dataLabelsColor)
||
'white'
}
}
},
series:
[{
color:'#F2BE20',
name:
'John',
data:
[50,
30,
40,
70,
20]
},
{
color:'#F8FB23',
name:
'Jane',
data:
[20,
20,
30,
20,
10]
},
{
color:'#E9070B',
name:
'Joe',
data:
[30,
40,
40,
20,
50]
},{type:
'line',
name:
'John',
data:[{
name:
'John',
y:
50
},
{
name:
'John',
y:
30
},
{
name:
'John',
y:
40
},{
name:
'John',
y:
70
},{
name:
'John',
y:
20
}
]},
{type:
'line',
name:
'Joe',
data:[{
name:
'Joe',
y:
30
},
{
name:
'Joe',
y:
40
},
{
name:
'Joe',
y:
40
},{
name:
'Joe',
y:
20
},{
name:
'Joe',
y:
50
}
]},
{type:
'line',
name:
'Jane',
data:[{
name:
'Jane',
y:
20
},
{
name:
'Jane',
y:
20
},
{
name:
'Jane',
y:
30
},{
name:
'Jane',
y:
20
},{
name:
'Jane',
y:
10
}
]}
]
});
});
/script
利用jquery的插件绘制图表时,选择哪个插件更好
我一直用的Finereport来实现的，一般来说，报表插件就是实现报表与打印等相关功能的浏览器插件，通常包括报表分析，报表展现、图表、打印与数据导出等功能。Finereport本身在报表软件这里就是国内的领军企业，他们官网会定期对插件进行更新，满足各种需求。
jQuery图表插件怎么应用到网页上
一般来说直接使用script type="text/javascript" src="你下载插件的路径(.js后缀)"/script引入到WEB后 直接调用其提供的方法,要注意的是 其提供的方式是否需要特定事件，如果需要则绑定就可以了，绑定可以直接在元素中直接写入onclick等事件,如果有JS 则可以直接$('#id').click等等 ,再则就是在方法中传入合适的值就可以了
