jquery图表插件highcharts的安装使用

1.下载highcharts 官网地址

2. 解压后要在项目里使用，需要引入几个js文件

（1) jquery-1.8.2.js

（2）highcharts.js

*（3)如果需要导出图片的话这个也是必须的exporting.js

3.简单的demo

$(function () {
        var chart = new Highcharts.Chart({
            chart: {
                //需要显示的DIV名
                renderTo: 'container',
                //图表类型
                type: 'line'
            },
            //图标标题
            title: {
                text: '微博话题折线图测试'
            },
            //子标题
            subtitle: {
                text: '来源：www.rying.com'
            },
            //X轴
            xAxis: {
                categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
            },
            //Y轴
            yAxis: {
                title: {
                    text: '话题数量'
                }
            },
            //导出图片
            exporting:{
                //导出图片名
                filename:'测试图片',
                url:'http://localhost:8080/HighCharts/Highcharts-Chart-Export',
                width: '2000' //图片宽度
            },
            //tooltip
            tooltip: {
                enabled: true,
                formatter: function() {
                    return '<b>'+ this.series.name +'</b><br/>'+
                        this.x +': '+ this.y;
                }
            },
            plotOptions: {
                line: {
                    //折线图各个点上是否显示数据
                    dataLabels: {
                        enabled: true
                    },
                    //鼠标移上去是否显示tooltip
                    enableMouseTracking: true
                }
            },
            //数据，json数组
            series: [{
                name: '新浪',
                data: [170, 169, 395, 1145, 1184, 1215, 1552, 1665, 1833, 1183, 1139, 196]
            }, {
                name: '腾讯',
                data: [139, 142, 157, 185, 1119, 1512, 1170, 1116, 1142, 1013, 616, 418]
            },{
                name: 'twitter',
                data: [391, 422, 537, 815, 1139, 1252, 1720, 1626, 1422, 123, 626, 428]
            }]
        });
});

4.导出图片功能，需要修改他的默认地址。

（1）去maven官网下载maven 官网

（2) 解压到你本地就可以了，dos下到你的highcharts文件夹pom.xml同级目录，比如我的是：F:\personal\Highcharts-2.3.3\exporting-server\java\highcharts-export

（3）然后运行命令 mvn clean package，然后就会开始下载

（4）下载完成后就是转成图片的一个war包项目，放到你的tomcat webapps下面启动tomcat就可以访问到了

（5）转换图片的servlet的默认名字是 ：Highcharts-Chart-Export

 (6) 在上面的代码可以看到我把项目重命名成HighCharts了，加入

 exporting:{
                //导出图片名
                filename:'测试图片',
                url:'http://localhost:8080/HighCharts/Highcharts-Chart-Export',
                width: '2000' //图片宽度
            }

改变转换图片的url，当然你也可以修改export.js下面的url（有点不爽的是好像导出的图片只能修改宽，不能改变高度）

tips：最新的higgcharts的图片转换的servelt因为使用了servlet3.0的API，所有tomcat6.X是不支持的，必须要用tomcat7才行哦，亲。