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>
<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>
<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>
相关推荐
JavaScript绘制曲线、圆形饼图实例 本资源是关于使用JavaScript绘制曲线和圆形饼图的实例。该实例使用HTML、JavaScript和CSS技术来实现曲线和圆形饼图的绘制。 知识点1:JavaScript绘制曲线 JavaScript可以使用 ...
<title>HTML5饼图实例 <canvas id="pieChart" width="400" height="400"></canvas> ``` 接下来，我们需要编写JavaScript代码来填充画布。在本例中，`demo.html`文件可能包含以下JavaScript代码： ```...
软件介绍： VC++利用MSchart输出柱状图、拆线图、饼图实例04439392MSChart是微软推出的基于图形显示的ActiveX控件，可以用来绘制各种数字统计图表。比如折线图、柱状图和饼状图等，本小例子就是VC++利用MSchart输出...
VC++ 利用MSchart输出柱状图、拆线图、饼图实例 MSChart是微软推出的基于图形显示的ActiveX控件，可以用来绘制各种数字统计图表。比如折线图、柱状图和饼状图等，本小例子就是VC++利用MSchart输出柱状图、拆线图等...
总结来说，VC++利用MSchart输出柱状图、折线图、饼图实例源码是一个很好的学习资源，它涵盖了MSChart的基本用法和常见图表类型的实现。通过这个实例，开发者可以快速掌握在VC++环境中使用MSChart进行数据可视化的...
这是七张数据分析PPT饼图实例模板，第一PPT模板网提供免费下载； 本组幻灯片饼状图，均为可编辑数据样式，非图片格式。如果你的PPT需要插入饼状图，那么您只需双击图标进行数据项的修改即可； 关键词：数据统计，...
在MFC中，可以通过创建CChartCtrl类的实例来开始制作柱状图。你需要为每个数据点创建一个CDataPoint对象，并将其添加到CChartSeries对象中，然后将该系列添加到图表控件。CDataPoint对象可以设置颜色、标签、值等...
首先，我们来看生成普通饼图的实例代码。在ASP.NET中，我们可以利用GDI+（Graphics Device Interface Plus）来绘制图形。在给定的代码中，定义了一个名为`Drawing`的ASP.NET页面，它包含一个`Page_Load`事件处理程序...
//Set visible map extents map.Center = new SharpMap.Geometries.Point(centerX, centerY); map.Zoom = Zoom; //Generate map System.Drawing.Bitmap img = (System.Drawing.Bitmap)map.GetMap();...
在本文中，我们将探讨如何使用Kotlin编程语言来实现一个饼图实例。饼图是一种常见的数据可视化工具，它使用不同颜色的圆弧来代表数据的比例。以下是如何使用Kotlin创建饼图的关键步骤和知识点。 首先，我们需要理解...
3. JavaScript代码：利用jQuery选择canvas元素，然后使用Chart.js API创建饼图实例，传递数据和配置选项。 4. 动态更新：如果需要，还可以使用jQuery监听事件，动态更新饼图数据。 **Highcharts** Highcharts是一个...
这是七张数据分析PPT饼图实例模板，第一PPT模板网提供免费下载； 本组幻灯片饼状图，均为可编辑数据样式，非图片格式。如果你的PPT需要插入饼状图，那么您只需双击图标进行数据项的修改即可； 关键词：数据统计，...
3. **数据绑定**：将数据绑定到饼图实例上，图表会自动计算每个扇形的角度。 4. **事件监听**：添加事件监听器，如数据更新事件，当数据发生变化时，调用饼图的更新方法重新渲染。 5. **交互功能**：可选地，添加...
本文实例讲述了ASP.Net页面生成饼图的方法。分享给大家供大家参考。具体实现方法如下： 1.生成普通饼图： 代码如下:using System; using System.Collections.Generic; using System.Drawing; using System.Drawing....
- 在客户端JavaScript中，解析数据并调用amcharts的API创建饼图实例。 5. **交互性与动态更新**: amcharts饼图支持动态更新，可以通过Ajax从服务器获取新数据，或者响应用户操作如点击、悬停等更新图表内容。 6. ...
在这个饼图实例中，我们可能使用了一个名为`Chart.js`或`D3.js`的库，这两个都是流行的JavaScript图表库。它们提供了丰富的API和方法，帮助开发者轻松创建各种类型的图表，包括饼图。通过调用这些库的方法，我们可以...
【描述】提到的效果图链接（http://msgcn.cn/bbsimg/001/）虽然无法在当前环境下访问，但通常会展示一个实际运行的Flash饼图实例，包括图形的外观、交互性以及数据的呈现方式。通过这个饼图，用户可以直观地理解数据...
4. 初始化图表：使用`new Chart()`创建饼图实例，传入`canvas`元素和配置对象。 5. 配置选项：可以自定义颜色、标签位置、动画效果等。 6. 更新图表：如果需要动态更新数据，可以调用`update()`方法。 ### 三、...
然后，在`default.aspx.cs`文件中，使用WebChart的API创建一个饼图实例，设置其属性，如颜色、标题、数据系列等。接着，根据从数据库获取的数据填充饼图的数据源。最后，将生成的饼图嵌入到网页中，以便用户查看。...