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] }] }); });
(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才行哦,亲。