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: "",
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: "",
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: '//' + 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>
原文：
標簽：
圖表highchartshighcharts 柱狀圖
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
半島外圍網上直營 
21次
相關產品
正式授權
最新文章 
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線