Highcharts和Highstock实例(包括折线图，饼图，柱状图)
1. highcharts实例代码，其中导出功能没有配置本地化，用的是官方导出接口。<html>
????<head>
????????<title>highcharts报表示例</title>
????????<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
????????<script type="text/javascript" src="./js/jquery.min.js"></script>
????????<script type="text/javascript">
????????????$(function () {
????????????????var chart;
????????????????$(document).ready(function() {
????????????????????/**
?????????????????????* highcharts数据图表
?????????????????????*?
?????????????????????* @param {object} chart 图表的相关参数配置
?????????????????????* @param {object} credits 图表版权信息参数配置
?????????????????????* @param {object} lang 图表语言参数配置
?????????????????????* @param {object} exporting 导出配置
?????????????????????* @param {object} title 标题配置
?????????????????????* @param {object} xAxis X轴配置
?????????????????????* @param {object} yAxis Y轴配置
?????????????????????* @param {object} plotOptions 各类型图表绘制配置
?????????????????????* @param {object} labels 数据图表标签配置
?????????????????????* @param {array} series 数据源配置
?????????????????????*/
????????????????????chart = new Highcharts.Chart({
????????????????????????/**
?????????????????????????* 图表配置
?????????????????????????*?
?????????????????????????* @param {string} renderTo 图表加载的位置
?????????????????????????* @param {int} width 图表的宽度
?????????????????????????* @param {int} hight 图表的高度
?????????????????????????* @param {string} type 图表的默认类型
?????????????????????????* @param {string} zoomType 图表的缩放选项，有：x, y, xy
?????????????????????????*/
????????????????????????chart: {
????????????????????????????// 图表加载的位置
????????????????????????????renderTo: 'container',
????????????????????????????// 图表宽度
????????????????????????????width: 600,
????????????????????????????// 图表高度
????????????????????????????hight: 500,
????????????????????????????// 默认图表类型
????????????????????????????type: 'line',
????????????????????????????// 缩放配置：x，y，xy
????????????????????????????zoomType: ''
????????????????????????},
????????????????????????/**
?????????????????????????* 版权信息配置，不用修改直接复制
?????????????????????????*?
?????????????????????????* @param {boolean} enabled 是否显示版权信息
?????????????????????????* @param {string} href 版权信息所链接到的地址
?????????????????????????* @param {string} text 版权信息所显示的文字内容
?????????????????????????*/
????????????????????????credits:{
????????????????????????????enabled: false,
????????????????????????????href: "http://www.msnui.tk/Admin",
????????????????????????????text: '微源网络科技'
????????????????????????},
????????????????????????/**
?????????????????????????* 语言配置，不用修改直接复制
?????????????????????????*?
?????????????????????????* @param {string} exportButtonTitle 导出按钮的标题文字
?????????????????????????* @param {string} printButtonTitle 打印按钮的标题文字
?????????????????????????*/
????????????????????????lang:{
????????????????????????????exportButtonTitle:'导出PDF',
????????????????????????????printButtonTitle:'打印报表'
????????????????????????},
????????????????????????/**
?????????????????????????* 导出配置，不用修改直接复制
?????????????????????????*?
?????????????????????????* @param {boolean} enabled 是否允许导出
?????????????????????????* @param {object} buttons 关于与导出和打印按钮相关的配置对象
?????????????????????????* @param {string} filename 导出文件的文件名
?????????????????????????* @param {string} type 默认导出文件的格式
?????????????????????????*/
????????????????????????exporting:{
????????????????????????????// 是否允许导出
????????????????????????????enabled:true,
????????????????????????????// 按钮配置
????????????????????????????buttons:{
????????????????????????????????// 导出按钮配置
????????????????????????????????exportButton:{
????????????????????????????????????menuItems: null,
????????????????????????????????????onclick: function() {
????????????????????????????????????????this.exportChart();
????????????????????????????????????}
????????????????????????????????},
????????????????????????????????// 打印按钮配置
????????????????????????????????printButton:{
????????????????????????????????????enabled:false
????????????????????????????????}
????????????????????????????},
????????????????????????????// 文件名
????????????????????????????filename: '报表',
????????????????????????????// 导出文件默认类型
????????????????????????????type:'application/pdf'
????????????????????????},
????????????????????????/**
?????????????????????????* 图表的标题
?????????????????????????*?
?????????????????????????* @param {string} text 图表的标题，如果不需要显示标题，直接设置为空字符串就行
?????????????????????????*/
????????????????????????title: {
????????????????????????????text: '联合图表实例'
????????????????????????},
????????????????????????/**
?????????????????????????* X轴配置
?????????????????????????*?
?????????????????????????* @param {array} categories X轴坐标分类值
?????????????????????????* @param {object} labels 坐标标签配置对象
?????????????????????????* @param {int} tickInterval 坐标轴的步进值
?????????????????????????* @param {object} title 坐标轴标题
?????????????????????????*/
????????????????????????xAxis: {
????????????????????????????// X轴分类
????????????????????????????categories: ['苹果', '桔子', '梨子', '香蕉', '李子'],
????????????????????????????// 坐标轴的标签
????????????????????????????labels:{
????????????????????????????????// 标签位置
????????????????????????????????align: 'center',
????????????????????????????????// 标签格式化
????????????????????????????????formatter: function(){
????????????????????????????????????return this.value;
????????????????????????????????},
????????????????????????????????// 标签旋转度数
????????????????????????????????rotation: 20,
????????????????????????????????// 标签交错显示的行数
????????????????????????????????staggerLines: 1
????????????????????????????},
????????????????????????????// X轴的步进值，决定隔多少个显示一个
????????????????????????????tickInterval: 1,
????????????????????????????// 坐标轴标题
????????????????????????????title: {
????????????????????????????????text: '水果分类'
????????????????????????????}
????????????????????????},
????????????????????????/**
?????????????????????????* y轴配置
?????????????????????????*?
?????????????????????????* @param {object} labels 坐标标签配置对象
?????????????????????????* @param {int} tickInterval 坐标轴的步进值
?????????????????????????* @param {object} title 坐标轴标题
?????????????????????????*/
????????????????????????yAxis: {
????????????????????????????// 坐标轴的标签
????????????????????????????labels:{
????????????????????????????????// 标签位置
????????????????????????????????align: 'right',
????????????????????????????????// 标签格式化
????????????????????????????????formatter: function(){
????????????????????????????????????return this.value + '个';
????????????????????????????????}
????????????????????????????},
????????????????????????????// y轴的步进值，决定隔多少个显示一个
????????????????????????????tickInterval: 3,
????????????????????????????// 坐标轴标题
????????????????????????????title: {
????????????????????????????????text: '水果个数'
????????????????????????????}
????????????????????????},
????????????????????????/**
?????????????????????????* 绘图的各选项、参数配置
?????????????????????????* @param {object} series 数列，可以配置各种不同类型图表的默认参数
?????????????????????????* @param {object} bar 横向柱状图配置参数
?????????????????????????* @param {object} column 纵向柱状图配置参数
?????????????????????????* @param {object} line 线性图
?????????????????????????* @param {object} spline 圆滑曲线图配置参数
?????????????????????????* @param {object} pie 饼状图
?????????????????????????*/
????????????????????????plotOptions:{
????????????????????????????/**
?????????????????????????????* 数列，对于所有的图表都可以适用的配置参数，属于共用性质。
?????????????????????????????*/
????????????????????????????series: {
????????????????????????????????// 鼠标样式
????????????????????????????????cursor: 'pointer',
????????????????????????????????events:{
????????????????????????????????????// 数据标注不可点击
????????????????????????????????????legendItemClick: false
????????????????????????????????},
????????????????????????????????// 当是柱状图时，柱状的宽度
????????????????????????????????pointWidth: 15
????????????????????????????},
????????????????????????????/**
?????????????????????????????* 横向柱状图
?????????????????????????????*/
????????????????????????????bar:{
????????????????????????????????// 数据点的点击事件
????????????????????????????????events:{
????????????????????????????????????click: function(event){
????????????????????????????????????????//alert('The bar was clicked, and you can add any other functions.');
????????????????????????????????????}
????????????????????????????????},
????????????????????????????????// 当值为0时，在图表中柱状体的长度设置
????????????????????????????????minPointLength: 2,
????????????????????????????????// 当具体的数据点被点击时的事件响应函数。如果不需要事件响应，可以删除。
????????????????????????????????point:{
????????????????????????????????????events:{
????????????????????????????????????????click: function(){
????????????????????????????????????????????//alert('This point was clicked. You can and any other functions.');
????????????????????????????????????????}
????????????????????????????????????}
????????????????????????????????},
????????????????????????????????// 是否在图注中显示。
????????????????????????????????showInLegend: true,
????????????????????????????????// 是否堆叠，默认：null，数值：normal，百分比：percent
????????????????????????????????//stacking: 'normal',
????????????????????????????????// 调整图像顺序关系
????????????????????????????????zIndex: 1
????????????????????????????},
????????????????????????????/**
?????????????????????????????* 纵向柱状图
?????????????????????????????*/
????????????????????????????column:{
????????????????????????????????// 数据点的点击事件
????????????????????????????????events:{
????????????????????????????????????click: function(event){
????????????????????????????????????????//alert('The bar was clicked, and you can add any other functions.');
????????????????????????????????????}
????????????????????????????????},
????????????????????????????????// 当值为0时，在图表中柱状体的长度设置
????????????????????????????????minPointLength: 2,
????????????????????????????????// 当具体的数据点被点击时的事件响应函数。如果不需要事件响应，可以删除。
????????????????????????????????point:{
????????????????????????????????????events:{
????????????????????????????????????????click: function(){
????????????????????????????????????????????//alert('This point was clicked. You can and any other functions.');
????????????????????????????????????????}
????????????????????????????????????}
????????????????????????????????},
????????????????????????????????// 是否在图注中显示。
????????????????????????????????showInLegend: true,
????????????????????????????????// 是否堆叠，默认：null，数值：normal，百分比：percent
????????????????????????????????//stacking: null,
????????????????????????????????// 调整图像顺序关系
????????????????????????????????zIndex: 2
????????????????????????????},
????????????????????????????/**
?????????????????????????????* 线性图，与spline的区别在于点与点之间的连线是直线还是圆滑曲线。
?????????????????????????????*/
????????????????????????????line:{
????????????????????????????????// 允许线性图上的数据点进行点击
????????????????????????????????allowPointSelect: true,
????????????????????????????????// 数据点的点击事件
????????????????????????????????events:{
????????????????????????????????????click: function(event){
????????????????????????????????????????//alert('The bar was clicked, and you can add any other functions.');
????????????????????????????????????}
????????????????????????????????},
????????????????????????????????// 当具体的数据点被点击时的事件响应函数。如果不需要事件响应，可以删除。
????????????????????????????????point:{
????????????????????????????????????events:{
????????????????????????????????????????click: function(){
????????????????????????????????????????????//alert('This point on the line was clicked. You can and any other functions.');
????????????????????????????????????????}
????????????????????????????????????}
????????????????????????????????},
????????????????????????????????// 是否在图注中显示。
????????????????????????????????showInLegend: true,
????????????????????????????????// 调整图像顺序关系
????????????????????????????????zIndex: 3
????????????????????????????},
????????????????????????????/**
?????????????????????????????* 曲线图，与spline的区别在于点与点之间的连线是直线还是圆滑曲线。
?????????????????????????????*/
????????????????????????????spline:{
????????????????????????????????// 允许线性图上的数据点进行点击
????????????????????????????????allowPointSelect: true,
????????????????????????????????// 数据点的点击事件
????????????????????????????????events:{
????????????????????????????????????click: function(event){
????????????????????????????????????????//alert('The bar was clicked, and you can add any other functions.');
????????????????????????????????????}
????????????????????????????????},
????????????????????????????????// 当具体的数据点被点击时的事件响应函数。如果不需要事件响应，可以删除。
????????????????????????????????point:{
????????????????????????????????????events:{
????????????????????????????????????????click: function(){
????????????????????????????????????????????//alert('This point on the line was clicked. You can and any other functions.');
????????????????????????????????????????}
????????????????????????????????????}
????????????????????????????????},
????????????????????????????????// 是否在图注中显示。
????????????????????????????????showInLegend: true,
????????????????????????????????// 调整图像顺序关系
????????????????????????????????zIndex: 3
????????????????????????????},
????????????????????????????/**
?????????????????????????????* 饼状图
?????????????????????????????*/
????????????????????????????pie:{
????????????????????????????????// 是否允许扇区点击
????????????????????????????????allowPointSelect: true,
????????????????????????????????// 点击后，滑开的距离
????????????????????????????????slicedOffset: 5,
????????????????????????????????// 饼图的中心坐标
????????????????????????????????center: [100, 80],
????????????????????????????????// 饼图的大小
????????????????????????????????size: 100,
????????????????????????????????// 数据标签
????????????????????????????????dataLabels: {
????????????????????????????????????// 是否允许标签
????????????????????????????????????enabled: true,
????????????????????????????????????// 标签与图像元素之间的间距
????????????????????????????????????distance: 10
????????????????????????????????},
????????????????????????????????// 数据点的点击事件
????????????????????????????????events:{
????????????????????????????????????click: function(event){
????????????????????????????????????????//alert('The bar was clicked, and you can add any other functions.');
????????????????????????????????????}
????????????????????????????????},
????????????????????????????????// 是否忽略隐藏的项
????????????????????????????????ignoreHiddenPoint: true,
????????????????????????????????// 当具体的数据点被点击时的事件响应函数。如果不需要事件响应，可以删除。
????????????????????????????????point:{
????????????????????????????????????events:{
????????????????????????????????????????click: function(){
????????????????????????????????????????????//alert('This point on the line was clicked. You can and any other functions.');
????????????????????????????????????????}
????????????????????????????????????}
????????????????????????????????},
????????????????????????????????// 是否在图注中显示。
????????????????????????????????showInLegend: false,
????????????????????????????????// 调整图像顺序关系
????????????????????????????????zIndex: 0
????????????????????????????}
????????????????????????},
????????????????????????/**
?????????????????????????* 数据图表标签配置
?????????????????????????*?
?????????????????????????* @param {array} items 项目配置
?????????????????????????*/
????????????????????????labels: {
????????????????????????????items: [{
????????????????????????????????????html: '水果总消耗量',
????????????????????????????????????style: {
????????????????????????????????????????left: '65px',
????????????????????????????????????????top: '8px',
????????????????????????????????????????color: 'black'
????????????????????????????????????}
????????????????????????????????}]
????????????????????????},
????????????????????????/**
?????????????????????????* 数据源配置，本身是一个对象数组
?????????????????????????*?
?????????????????????????* @param {string} type 图表的类型
?????????????????????????* @param {string} name 数据序列的名称
?????????????????????????* @param {array} data 数据序列，是一个对象数组
?????????????????????????*/
????????????????????????series: [{
????????????????????????????????type: 'column',
????????????????????????????????name: 'Jane',
????????????????????????????????data: [3, 2, 1, 3, 4]
????????????????????????????}, {
????????????????????????????????type: 'column',
????????????????????????????????name: 'John',
????????????????????????????????data: [2, 3, 5, 7, 6]
????????????????????????????}, {
????????????????????????????????type: 'column',
????????????????????????????????name: 'Joe',
????????????????????????????????data: [4, 3, 3, 9, 0]
????????????????????????????}, {
????????????????????????????????type: 'spline',
????????????????????????????????name: '平均',
????????????????????????????????data: [3, 2.67, 3, 6.33, 3.33]
????????????????????????????}, {
????????????????????????????????type: 'pie',
????????????????????????????????name: '水果总消耗量',
????????????????????????????????data: [{
????????????????????????????????????????name: 'Jane',
????????????????????????????????????????y: 13,
????????????????????????????????????????color: '#4572A7' // Jane's color
????????????????????????????????????}, {
????????????????????????????????????????name: 'John',
????????????????????????????????????????y: 23,
????????????????????????????????????????color: '#AA4643' // John's color
????????????????????????????????????}, {
????????????????????????????????????????name: 'Joe',
????????????????????????????????????????y: 19,
????????????????????????????????????????color: '#89A54E' // Joe's color
????????????????????????????????????}]
????????????????????????????}]
????????????????????});
????????????????});
????????????});
????????</script>
????</head>
????<body>
????????<script src="./js/highcharts/highcharts.js"></script>
????????<script src="./js/highcharts/modules/exporting.js"></script>
????????<div id="container"></div>
????</body>
</html>2. highstock实例代码，其中导出功能配置了本地化，用的是exporting中的导出接口。 <html>
????<head>
????????<title>highstock报表示例</title>
????????<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
????????<script type="text/javascript" src="./js/jquery.min.js"></script>
????????<!-- 源数据 -->
????????<script type="text/javascript" src="./js/usdeur.js"></script>
????????<script type="text/javascript">
????????????//图表
????????????$(function() {
????????????????/**
?????????????????* highstock数据图表
?????????????????*?
?????????????????* @param {object} chart 图表的相关参数配置
?????????????????* @param {object} credits 图表版权信息参数配置
?????????????????* @param {object} lang 图表语言参数配置
?????????????????* @param {object} exporting 导出配置
?????????????????* @param {object} title 标题配置
?????????????????* @param {object} xAxis X轴配置
?????????????????* @param {array} series 数据源配置
?????????????????*/
????????????????var chart1 = new Highcharts.StockChart({
????????????????????/**
?????????????????????* 图表配置
?????????????????????*?
?????????????????????* @param {string} renderTo 图表加载的位置
?????????????????????* @param {int} width 图表的宽度
?????????????????????* @param {int} hight 图表的高度
?????????????????????*/
????????????????????chart: {
????????????????????????renderTo: 'container',
????????????????????????// 图表宽度
????????????????????????width: 700,
????????????????????????// 图表高度
????????????????????????hight: 500
????????????????????},
????????????????????/**
?????????????????????* 版权信息配置，不用修改直接复制
?????????????????????*?
?????????????????????* @param {boolean} enabled 是否显示版权信息
?????????????????????* @param {string} href 版权信息所链接到的地址
?????????????????????* @param {string} text 版权信息所显示的文字内容
?????????????????????*/
????????????????????credits:{
????????????????????????enabled: false,
????????????????????????href: "http://www.msnui.tk/Admin",
????????????????????????text: '微源网络科技'
????????????????????},
????????????????????/**
?????????????????????* 语言配置，不用修改直接复制
?????????????????????*?
?????????????????????* @param {array} months 配置月份语言
?????????????????????* @param {array} shortMonths 配置短月份
?????????????????????* @param {array} weekdays 配置星期
?????????????????????* @param {string} exportButtonTitle 导出按钮的标题文字
?????????????????????* @param {string} printButtonTitle 打印按钮的标题文字
?????????????????????*/
????????????????????lang:{
????????????????????????months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
????????????????????????shortMonths: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一', '十二'],
????????????????????????weekdays: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
????????????????????????exportButtonTitle:'导出PDF',
????????????????????????printButtonTitle:'打印报表'
????????????????????},
????????????????????/**
?????????????????????* 导出配置，不用修改直接复制
?????????????????????*?
?????????????????????* @param {boolean} enabled 是否允许导出
?????????????????????* @param {object} buttons 关于与导出和打印按钮相关的配置对象
?????????????????????* @param {string} filename 导出文件的文件名
?????????????????????* @param {string} type 默认导出文件的格式
?????????????????????*/
????????????????????exporting:{
????????????????????????// 是否允许导出
????????????????????????enabled:true,
????????????????????????// 按钮配置
????????????????????????buttons:{
????????????????????????????// 导出按钮配置
????????????????????????????exportButton:{
????????????????????????????????menuItems: null,
????????????????????????????????onclick: function() {
????????????????????????????????????this.exportChart();
????????????????????????????????}
????????????????????????????},
????????????????????????????// 打印按钮配置
????????????????????????????printButton:{
????????????????????????????????enabled:false
????????????????????????????}
????????????????????????},
????????????????????????// 文件名
????????????????????????filename: '报表',
????????????????????????// 配置导出接口
????????????????????????url: 'http://' + location.hostname + '/test/Highcharts-2.3.2/example/exporting/index.php',
????????????????????????// 导出文件默认类型
????????????????????????type:'application/pdf'
????????????????????},
????????????????????/**
?????????????????????* 图表的标题
?????????????????????*?
?????????????????????* @param {string} text 图表的标题，如果不需要显示标题，直接设置为空字符串就行
?????????????????????*/
????????????????????title: {
????????????????????????text: '图表实例标题'
????????????????????},
????????????????????/**
?????????????????????* 域选择配置
?????????????????????*?
?????????????????????* @param {array} buttons 缩放选择按钮
?????????????????????* @param {int} selected 默认选择缩放按钮中的第几个
?????????????????????* @param {boolean} inputEnabled 是否允许input标签选框
?????????????????????*/
????????????????????rangeSelector: {
????????????????????????// 缩放选择按钮，是一个数组。
????????????????????????// 其中type可以是： 'millisecond', 'second', 'minute', 'day', 'week', 'month', 'ytd' (year to date), 'year' 和 'all'。
????????????????????????// 其中count是指多少个单位type。
????????????????????????// 其中text是配置显示在按钮上的文字
????????????????????????buttons: [{
????????????????????????????????type: 'month',
????????????????????????????????count: 1,
????????????????????????????????text: '1月'
????????????????????????????}, {
????????????????????????????????type: 'month',
????????????????????????????????count: 3,
????????????????????????????????text: '3月'
????????????????????????????}, {
????????????????????????????????type: 'month',
????????????????????????????????count: 6,
????????????????????????????????text: '6月'
????????????????????????????}, {
????????????????????????????????type: 'year',
????????????????????????????????count: 1,
????????????????????????????????text: '1年'
????????????????????????????},{
????????????????????????????????type: 'year',
????????????????????????????????count: 3,
????????????????????????????????text: '3年'
????????????????????????????}, {
????????????????????????????????type: 'all',
????????????????????????????????text: '所有'
????????????????????????????}],
????????????????????????// 默认选择域：0（缩放按钮中的第一个）、1（缩放按钮中的第二个）……
????????????????????????selected: 1,
????????????????????????// 是否允许input标签选框
????????????????????????inputEnabled: false
????????????????????},
????????????????????/**
?????????????????????* 气泡示说明标签
?????????????????????*?
?????????????????????* @param {string} xDateFormat 日期时间格式化
?????????????????????*/
????????????????????tooltip:{
????????????????????????// 日期时间格式化
????????????????????????xDateFormat: '%Y-%m-%d %A'
????????????????????},
????????????????????/**
?????????????????????* X轴坐标配置
?????????????????????*?
?????????????????????* @param {object} dateTimeLabelFormats x轴日期时间格式化，不用修改直接使用
?????????????????????*/
????????????????????xAxis:{
????????????????????????// 如果X轴刻度是日期或时间，该配置是格式化日期及时间显示格式
????????????????????????dateTimeLabelFormats: {
????????????????????????????second: '%Y-%m-%d<br/>%H:%M:%S',
????????????????????????????minute: '%Y-%m-%d<br/>%H:%M',
????????????????????????????hour: '%Y-%m-%d<br/>%H:%M',
????????????????????????????day: '%Y<br/>%m-%d',
????????????????????????????week: '%Y<br/>%m-%d',
????????????????????????????month: '%Y-%m',
????????????????????????????year: '%Y'
????????????????????????}
????????????????????},
????????????????????/**
?????????????????????* 数据源配置，本身是一个对象数组
?????????????????????*?
?????????????????????* @param {string} name 数据序列的名称
?????????????????????* @param {array} data 数据序列，是一个对象数组。data的结构：[[时间戳, 值], [时间戳, 值], [时间戳, 值], ……]
?????????????????????*/
????????????????????series: [{
????????????????????????????name: '数据名称',
????????????????????????????data: usdeur
????????????????????????}]
????????????????});
????????????});
????????</script>
????</head>
????<body>
????????<script src="./js/highstock/highstock.js"></script>
????????<script src="./js/highstock/modules/exporting.js"></script>
????????<div id="container"></div>
????</body>
</html>
