日韩国产另类激情图区,97超碰人人艹人人,日韩偷自

Highcharts柱狀圖、折線圖、餅圖制作實(shí)例

轉(zhuǎn)帖|使用教程|編輯：龔雪|2014-08-18 09:21:59.000|閱讀 2151 次

概述：本文介紹了Highcharts和Highstock柱狀圖、折線圖、餅圖完整制作過程，并且附有全部制作代碼。其中導(dǎo)出功能沒有配置本地化，用的是官方導(dǎo)出接口。

1. highcharts實(shí)例代碼，其中導(dǎo)出功能沒有配置本地化，用的是官方導(dǎo)出接口。

<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數(shù)據(jù)圖表
* 
* @param {object} chart 圖表的相關(guān)參數(shù)配置
* @param {object} credits 圖表版權(quán)信息參數(shù)配置
* @param {object} lang 圖表語言參數(shù)配置
* @param {object} exporting 導(dǎo)出配置
* @param {object} title 標(biāo)題配置
* @param {object} xAxis X軸配置
* @param {object} yAxis Y軸配置
* @param {object} plotOptions 各類型圖表繪制配置
* @param {object} labels 數(shù)據(jù)圖表標(biāo)簽配置
* @param {array} series 數(shù)據(jù)源配置
*/
chart = new Highcharts.Chart({
/**
* 圖表配置
* 
* @param {string} renderTo 圖表加載的位置
* @param {int} width 圖表的寬度
* @param {int} hight 圖表的高度
* @param {string} type 圖表的默認(rèn)類型
* @param {string} zoomType 圖表的縮放選項(xiàng)，有：x, y, xy
*/
chart: {
// 圖表加載的位置
renderTo: 'container',
// 圖表寬度
width: 600,
// 圖表高度
hight: 500,
// 默認(rèn)圖表類型
type: 'line',
// 縮放配置：x，y，xy
zoomType: ''
},

/**
* 版權(quán)信息配置，不用修改直接復(fù)制
* 
* @param {boolean} enabled 是否顯示版權(quán)信息
* @param {string} href 版權(quán)信息所鏈接到的地址
* @param {string} text 版權(quán)信息所顯示的文字內(nèi)容
*/
credits:{
enabled: false,
href: "",
text: '微源網(wǎng)絡(luò)科技'
},

/**
* 語言配置，不用修改直接復(fù)制
* 
* @param {string} exportButtonTitle 導(dǎo)出按鈕的標(biāo)題文字
* @param {string} printButtonTitle 打印按鈕的標(biāo)題文字
*/
lang:{
exportButtonTitle:'導(dǎo)出PDF',
printButtonTitle:'打印報表'
},

/**
* 導(dǎo)出配置，不用修改直接復(fù)制
* 
* @param {boolean} enabled 是否允許導(dǎo)出
* @param {object} buttons 關(guān)于與導(dǎo)出和打印按鈕相關(guān)的配置對象
* @param {string} filename 導(dǎo)出文件的文件名
* @param {string} type 默認(rèn)導(dǎo)出文件的格式
*/
exporting:{
// 是否允許導(dǎo)出
enabled:true,
// 按鈕配置
buttons:{
// 導(dǎo)出按鈕配置
exportButton:{
menuItems: null,
onclick: function() {
this.exportChart();
}
},
// 打印按鈕配置
printButton:{
enabled:false
}
},
// 文件名
filename: '報表',
// 導(dǎo)出文件默認(rèn)類型
type:'application/pdf'
},

/**
* 圖表的標(biāo)題
* 
* @param {string} text 圖表的標(biāo)題，如果不需要顯示標(biāo)題，直接設(shè)置為空字符串就行
*/
title: {
text: '聯(lián)合圖表實(shí)例'
},

/**
* X軸配置
* 
* @param {array} categories X軸坐標(biāo)分類值
* @param {object} labels 坐標(biāo)標(biāo)簽配置對象
* @param {int} tickInterval 坐標(biāo)軸的步進(jìn)值
* @param {object} title 坐標(biāo)軸標(biāo)題
*/
xAxis: {
// X軸分類
categories: ['蘋果', '桔子', '梨子', '香蕉', '李子'],
// 坐標(biāo)軸的標(biāo)簽
labels:{
// 標(biāo)簽位置
align: 'center',
// 標(biāo)簽格式化
formatter: function(){
return this.value;
},
// 標(biāo)簽旋轉(zhuǎn)度數(shù)
rotation: 20,
// 標(biāo)簽交錯顯示的行數(shù)
staggerLines: 1
},
// X軸的步進(jìn)值，決定隔多少個顯示一個
tickInterval: 1,
// 坐標(biāo)軸標(biāo)題
title: {
text: '水果分類'
}
},

/**
* y軸配置
* 
* @param {object} labels 坐標(biāo)標(biāo)簽配置對象
* @param {int} tickInterval 坐標(biāo)軸的步進(jìn)值
* @param {object} title 坐標(biāo)軸標(biāo)題
*/
yAxis: {
// 坐標(biāo)軸的標(biāo)簽
labels:{
// 標(biāo)簽位置
align: 'right',
// 標(biāo)簽格式化
formatter: function(){
return this.value + '個';
}
},
// y軸的步進(jìn)值，決定隔多少個顯示一個
tickInterval: 3,
// 坐標(biāo)軸標(biāo)題
title: {
text: '水果個數(shù)'
}
},

/**
* 繪圖的各選項(xiàng)、參數(shù)配置
* @param {object} series 數(shù)列，可以配置各種不同類型圖表的默認(rèn)參數(shù)
* @param {object} bar 橫向柱狀圖配置參數(shù)
* @param {object} column 縱向柱狀圖配置參數(shù)
* @param {object} line 線性圖
* @param {object} spline 圓滑曲線圖配置參數(shù)
* @param {object} pie 餅狀圖
*/
plotOptions:{
/**
* 數(shù)列，對于所有的圖表都可以適用的配置參數(shù)，屬于共用性質(zhì)。
*/
series: {
// 鼠標(biāo)樣式
cursor: 'pointer',
events:{
// 數(shù)據(jù)標(biāo)注不可點(diǎn)擊
legendItemClick: false
},
// 當(dāng)是柱狀圖時，柱狀的寬度
pointWidth: 15
},

/**
* 橫向柱狀圖
*/
bar:{
// 數(shù)據(jù)點(diǎn)的點(diǎn)擊事件
events:{
click: function(event){
//alert('The bar was clicked, and you can add any other functions.');
}
},
// 當(dāng)值為0時，在圖表中柱狀體的長度設(shè)置
minPointLength: 2,
// 當(dāng)具體的數(shù)據(jù)點(diǎn)被點(diǎn)擊時的事件響應(yīng)函數(shù)。如果不需要事件響應(yīng)，可以刪除。
point:{
events:{
click: function(){
//alert('This point was clicked. You can and any other functions.');
}
}
},
// 是否在圖注中顯示。
showInLegend: true,
// 是否堆疊，默認(rèn)：null，數(shù)值：normal，百分比：percent
//stacking: 'normal',
// 調(diào)整圖像順序關(guān)系
zIndex: 1
},

/**
* 縱向柱狀圖
*/
column:{
// 數(shù)據(jù)點(diǎn)的點(diǎn)擊事件
events:{
click: function(event){
//alert('The bar was clicked, and you can add any other functions.');
}
},
// 當(dāng)值為0時，在圖表中柱狀體的長度設(shè)置
minPointLength: 2,
// 當(dāng)具體的數(shù)據(jù)點(diǎn)被點(diǎn)擊時的事件響應(yīng)函數(shù)。如果不需要事件響應(yīng)，可以刪除。
point:{
events:{
click: function(){
//alert('This point was clicked. You can and any other functions.');
}
}
},
// 是否在圖注中顯示。
showInLegend: true,
// 是否堆疊，默認(rèn)：null，數(shù)值：normal，百分比：percent
//stacking: null,
// 調(diào)整圖像順序關(guān)系
zIndex: 2
},

/**
* 線性圖，與spline的區(qū)別在于點(diǎn)與點(diǎn)之間的連線是直線還是圓滑曲線。
*/
line:{
// 允許線性圖上的數(shù)據(jù)點(diǎn)進(jìn)行點(diǎn)擊
allowPointSelect: true,
// 數(shù)據(jù)點(diǎn)的點(diǎn)擊事件
events:{
click: function(event){
//alert('The bar was clicked, and you can add any other functions.');
}
},
// 當(dāng)具體的數(shù)據(jù)點(diǎn)被點(diǎn)擊時的事件響應(yīng)函數(shù)。如果不需要事件響應(yīng)，可以刪除。
point:{
events:{
click: function(){
//alert('This point on the line was clicked. You can and any other functions.');
}
}
},
// 是否在圖注中顯示。
showInLegend: true,
// 調(diào)整圖像順序關(guān)系
zIndex: 3
},

/**
* 曲線圖，與spline的區(qū)別在于點(diǎn)與點(diǎn)之間的連線是直線還是圓滑曲線。
*/
spline:{
// 允許線性圖上的數(shù)據(jù)點(diǎn)進(jìn)行點(diǎn)擊
allowPointSelect: true,
// 數(shù)據(jù)點(diǎn)的點(diǎn)擊事件
events:{
click: function(event){
//alert('The bar was clicked, and you can add any other functions.');
}
},
// 當(dāng)具體的數(shù)據(jù)點(diǎn)被點(diǎn)擊時的事件響應(yīng)函數(shù)。如果不需要事件響應(yīng)，可以刪除。
point:{
events:{
click: function(){
//alert('This point on the line was clicked. You can and any other functions.');
}
}
},
// 是否在圖注中顯示。
showInLegend: true,
// 調(diào)整圖像順序關(guān)系
zIndex: 3
},

/**
* 餅狀圖
*/
pie:{
// 是否允許扇區(qū)點(diǎn)擊
allowPointSelect: true,
// 點(diǎn)擊后，滑開的距離
slicedOffset: 5,
// 餅圖的中心坐標(biāo)
center: [100, 80],
// 餅圖的大小
size: 100,
// 數(shù)據(jù)標(biāo)簽
dataLabels: {
// 是否允許標(biāo)簽
enabled: true,
// 標(biāo)簽與圖像元素之間的間距
distance: 10
},
// 數(shù)據(jù)點(diǎn)的點(diǎn)擊事件
events:{
click: function(event){
//alert('The bar was clicked, and you can add any other functions.');
}
},
// 是否忽略隱藏的項(xiàng)
ignoreHiddenPoint: true,
// 當(dāng)具體的數(shù)據(jù)點(diǎn)被點(diǎn)擊時的事件響應(yīng)函數(shù)。如果不需要事件響應(yīng)，可以刪除。
point:{
events:{
click: function(){
//alert('This point on the line was clicked. You can and any other functions.');
}
}
},
// 是否在圖注中顯示。
showInLegend: false,
// 調(diào)整圖像順序關(guān)系
zIndex: 0
}
},

/**
* 數(shù)據(jù)圖表標(biāo)簽配置
* 
* @param {array} items 項(xiàng)目配置
*/
labels: {
items: [{
html: '水果總消耗量',
style: {
left: '65px',
top: '8px',
color: 'black'
}
}]
},

/**
* 數(shù)據(jù)源配置，本身是一個對象數(shù)組
* 
* @param {string} type 圖表的類型
* @param {string} name 數(shù)據(jù)序列的名稱
* @param {array} data 數(shù)據(jù)序列，是一個對象數(shù)組
*/
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實(shí)例代碼，其中導(dǎo)出功能配置了本地化，用的是exporting中的導(dǎo)出接口。

<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>
<!-- 源數(shù)據(jù) -->
<script type="text/javascript" src="./js/usdeur.js"></script>
<script type="text/javascript">
//圖表
$(function() {

/**
* highstock數(shù)據(jù)圖表
* 
* @param {object} chart 圖表的相關(guān)參數(shù)配置
* @param {object} credits 圖表版權(quán)信息參數(shù)配置
* @param {object} lang 圖表語言參數(shù)配置
* @param {object} exporting 導(dǎo)出配置
* @param {object} title 標(biāo)題配置
* @param {object} xAxis X軸配置
* @param {array} series 數(shù)據(jù)源配置
*/
var chart1 = new Highcharts.StockChart({

/**
* 圖表配置
* 
* @param {string} renderTo 圖表加載的位置
* @param {int} width 圖表的寬度
* @param {int} hight 圖表的高度
*/
chart: {
renderTo: 'container',
// 圖表寬度
width: 700,
// 圖表高度
hight: 500
},

/**
* 版權(quán)信息配置，不用修改直接復(fù)制
* 
* @param {boolean} enabled 是否顯示版權(quán)信息
* @param {string} href 版權(quán)信息所鏈接到的地址
* @param {string} text 版權(quán)信息所顯示的文字內(nèi)容
*/
credits:{
enabled: false,
href: "",
text: '微源網(wǎng)絡(luò)科技'
},

/**
* 語言配置，不用修改直接復(fù)制
* 
* @param {array} months 配置月份語言
* @param {array} shortMonths 配置短月份
* @param {array} weekdays 配置星期
* @param {string} exportButtonTitle 導(dǎo)出按鈕的標(biāo)題文字
* @param {string} printButtonTitle 打印按鈕的標(biāo)題文字
*/
lang:{
months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
shortMonths: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一', '十二'],
weekdays: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
exportButtonTitle:'導(dǎo)出PDF',
printButtonTitle:'打印報表'
},

/**
* 導(dǎo)出配置，不用修改直接復(fù)制
* 
* @param {boolean} enabled 是否允許導(dǎo)出
* @param {object} buttons 關(guān)于與導(dǎo)出和打印按鈕相關(guān)的配置對象
* @param {string} filename 導(dǎo)出文件的文件名
* @param {string} type 默認(rèn)導(dǎo)出文件的格式
*/
exporting:{
// 是否允許導(dǎo)出
enabled:true,
// 按鈕配置
buttons:{
// 導(dǎo)出按鈕配置
exportButton:{
menuItems: null,
onclick: function() {
this.exportChart();
}
},
// 打印按鈕配置
printButton:{
enabled:false
}
},
// 文件名
filename: '報表',
// 配置導(dǎo)出接口
url: '//' + location.hostname + '/test/Highcharts-2.3.2/example/exporting/index.php',
// 導(dǎo)出文件默認(rèn)類型
type:'application/pdf'
},

/**
* 圖表的標(biāo)題
* 
* @param {string} text 圖表的標(biāo)題，如果不需要顯示標(biāo)題，直接設(shè)置為空字符串就行
*/
title: {
text: '圖表實(shí)例標(biāo)題'
},

/**
* 域選擇配置
* 
* @param {array} buttons 縮放選擇按鈕
* @param {int} selected 默認(rèn)選擇縮放按鈕中的第幾個
* @param {boolean} inputEnabled 是否允許input標(biāo)簽選框
*/
rangeSelector: {
// 縮放選擇按鈕，是一個數(shù)組。
// 其中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: '所有'
}],
// 默認(rèn)選擇域：0（縮放按鈕中的第一個）、1（縮放按鈕中的第二個）……
selected: 1,
// 是否允許input標(biāo)簽選框
inputEnabled: false
},

/**
* 氣泡示說明標(biāo)簽
* 
* @param {string} xDateFormat 日期時間格式化
*/
tooltip:{
// 日期時間格式化
xDateFormat: '%Y-%m-%d %A'
},

/**
* X軸坐標(biāo)配置
* 
* @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'
}
},

/**
* 數(shù)據(jù)源配置，本身是一個對象數(shù)組
* 
* @param {string} name 數(shù)據(jù)序列的名稱
* @param {array} data 數(shù)據(jù)序列，是一個對象數(shù)組。data的結(jié)構(gòu)：[[時間戳, 值], [時間戳, 值], [時間戳, 值], ……]
*/
series: [{
name: '數(shù)據(jù)名稱',
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>

原文：

標(biāo)簽：圖表 highcharts highcharts 柱狀圖

本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請郵件反饋至chenjj@fc6vip.cn

上一篇：IntelliJ IDEA教程之Andriod項(xiàng)目開發(fā)篇：UI布局（一）下一篇：Kendo UI API中文介紹七：ComboBox (2)