jquery报表组件highchat的运用 - 报表当前位置:& &&&jquery报表组件highchat的运用jquery报表组件highchat的运用&&网友分享于：&&浏览：118次jquery报表组件highchat的使用
之前项目里面的报表组建用的是flash的amchart，非常漂亮，但是有几个缺陷，比如在数据量多的时候，某些提示信息会被flash给遮挡住，导致显示不全。另外部分浏览器没有安装flash的播放插件，导致客户端无法正常显示，另外amchart只支持xml格式的数据，参数等配置都在xml中进行配置的，和java的体系结构有些格格不入。所以后来索性替换成了jquery的一个报表插件highchart。
该插件支持各种主流的图表，比如饼图，柱图，线图。支持一些类似amchart的效果，比如动态缩进，动态加载，鼠标悬停提示，提示框等，支持json数据，支持jquery，支持ajax加载。
Highcharts 官网：
Highcharts 官网示例：/demo/
Highcharts 官网文档：/documentation/how-to-use
具体使用不多说了很简单的，主要说些小细节。
封装的js调用方法。
(function($){
$.fn.extend({
columnChart : function(option){
var defaultOption = {
moduleName:''
$.extend(defaultOption,option);
var chartOptions = {
renderTo: $(this).attr('id'),
defaultSeriesType: 'column'
categories:[]
allowDecimals: false,
align: 'right',
verticalAlign: 'top',
floating: true,
backgroundColor: '#FFFFFF',
borderColor: '#CCCCCC',
borderWidth: 1,
shadow: true
tooltip: {
formatter: function() {
return '&b&'+ this.x +'&/b&&br/&'+
this.series.name +': '+ this.y +'&br/&'+
defaultOption.moduleName+'总数量: '+ this.point.stackT
plotOptions: {
stacking: 'normal'
series: []
$.get(defaultOption.url, function(data) {
var moduleName='';
if(defaultOption.moduleName != ''){
moduleName = defaultOption.moduleN
moduleName = data.moduleN
chartOptions.title.text = moduleName+'柱状图';
chartOptions.yAxis.title.text = moduleN
chartOptions.xAxis.categories = data.
chartOptions.series = data.
new Highcharts.Chart(chartOptions);
$.fn.extend({
pieChart : function(option){
var defaultOption = {
moduleName:""
$.extend(defaultOption, option);
var chartOptions = {
renderTo: $(this).attr('id'),
plotBackgroundColor: null,
plotBorderWidth: 2,
plotShadow: true
text: defaultOption.moduleName+'饼状图'
tooltip: {
formatter: function() {
return '&b&'+ this.point.name +'&/b&: '+ this.y +' %';
plotOptions: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
formatter: function() {
if(this.y&0)
return '&b&'+ this.point.name +'&/b&: '+ this.y +' %';
showInLegend: true,
events : {
click : function(){//绑定click事件
alert("");
series: [{
type: 'pie',
name: 'Browser share',
$.get(defaultOption.url, function(data){
chartOptions.series[0].data=
new Highcharts.Chart(chartOptions);
})(jQuery)
后台很简单，用一个javabean组装数据拼装成一个json对象抛出即可。黑色背景色代码表示为饼图添加一个点击的事件，允许做些例外的操作，比如显示详情，或者切换页面等。
另外highchart支持到处图片或者pdf文件，需要导入几个lib包，最主要的是batik，该包由于升级到1.7，分散成20多个小的lib包，后来用了1.6的，加载几个其他必须的，一共3个lib包。
中文乱码问题，通过filter设置编码即可解决。
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 12345678910 Copyright & &&版权所有& & 用highchart的时候发现它是用svg来画图的，那么用canvas来做怎么样的。& & 以前做AS图表插件的时候，绘制图画主要用容器的Graphics对象来绘制，而canvas的context和Graphics一样，都可以用来绘制图形。& & 然后就试着用canvas做了这样一个东西。& & 具体实现如下，个人表达能力有问题，各位看官还是看源码吧，如下：& & 复制代码& &
相关经验教程
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.002 收益
的原创经验被浏览，获得 ￥0.002 收益
的原创经验被浏览，获得 ￥0.002 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.001 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益
的原创经验被浏览，获得 ￥0.005 收益}