Highcharts导出菜单无法显示的？
$(function(){
var objDate = new Date();
var strDate = objDate.getFullYear() + '-' + (objDate.getMonth()+1) + '-' + objDate.getDate();
$('#beginDate,#endDate').val(strDate);
$('#beginDate,#endDate').datepicker({
monthNamesShort: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
dateFormat: 'yy-mm-dd', //日期格式，自己设置
showAnim: "show", //显示日历的效果slide、fadeIn、show 等
monthNames: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
//showWeek: true, // 显示周数
showButtonPanel: true,
changeMonth: true, //是否显示月份的下拉菜单，默认为false
changeYear: true,
yearRange: '2013:2058',
monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月',],
dayNames: ['星期日','星期一','星期三','星期四','星期五','星期六'],
dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
dayNamesMin: ['日','一','二','三','四','五','六'],
closeText: '关闭',
currentText: '今天',
prevText: '前一月',
nextText: '后一月',
yearSuffix: '年',
showMonthAfterYear: true,
beforeShow: function () {
setTimeout(function () {
$('#ui-datepicker-div').css({'top':'243px'});//设置控件层级，有时候控件会被其它层挡住
$('.ui-datepicker-month').css({'backgroundColor':'#DEEDF7'});
$('.ui-datepicker-month').find('option').css('background','#F2F5F7');
$('.ui-datepicker-year').css({'backgroundColor':'#DEEDF7'});
}, 100);
}
});
var app = {
init:function(){
this.makeLineChart();
this.clickchart();
//this.chartLangReset();
},
//对所有的图表语言设置
//chartLangReset: function () {
// Highcharts.setOptions({
// lang: {
// printChart:"打印图表",
// downloadJPEG: "下载JPEG 图片" ,
// downloadPDF: "下载PDF文档" ,
// downloadPNG: "下载PNG 图片" ,
// downloadSVG: "下载SVG 矢量图" ,
// exportButtonTitle: "导出图片",
// resetZoom: "还原",
// contextButtonTitle: '打印或者下载图片',
// resetZoomTitle:"还原图表的初始比例",
// months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
// weekdays: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
// shortMonths: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
// }
// });
//},
//折线图
makeLineChart:function(){
//报表关联里面的报表
$.ajax({
type: "GET",
//url: "/forms-history/qushifenxi",
url: 'shujuguanlian.json',
dataType: 'json',
data:$('#connection-form').serialize(),
async: true,
success: function (result) {
var cj = result.cj;
var wy = result.wy;
var qx = result.qx;
var chart = $('#container_connect').highcharts({
chart:{
ignoreHiddenSeries: false, //点击legend消除所有数据，但是x、y依然存在
zoomType: 'xy',
resetZoomButton: {
position: {
x: -110,
// y: 10
},
relativeTo: 'chart',
theme: {
fill: '#4A90E2',
stroke: 'silver',
r: 5,
height:16,
style: {
color: 'white',
fontSize:16,
cursor:'pointer',
},
states: {
hover: {
fill: '#4A90E2',
style: {
color: 'white',
}
}
}
}
},
marginLeft:60,
marginTop: 50
},
title: {
text: null,
// x: -20 //center
},
exporting:{
enabled:false
},
xAxis: {
type: 'datetime',
labels: {
step: 1,
formatter: function () {
return Highcharts.dateFormat('%m/%d %H:%M', this.value);
}
}
},
//X轴分类
yAxis: [{
title: {
text: 'y1',
style: {
fontSize: 16
}
}
// max:15 //Y轴最大值
},{
title:{
text :'y2',
style: {
fontSize: 16
}
},
opposite:true
}
],
plotOptions:{
series:{
dataLabels:{
enabled:true,
align:'right'
}
}
},
navigation: { //配置按钮文字
buttonOptions: {
theme: {
// Good old text links
style: {
color: '#039',
textDecoration: 'none',
cursor:'pointer',
fontSize:16,
fontWeight:'bold'
}
},
verticalAlign: 'right',
// y: -30
},
},
exporting: {
buttons: {
contextButton: {
enabled: false
},
exportButton: {
text: '下载',
menuItems: Highcharts.getOptions().exporting.buttons.contextButton.menuItems.splice(2)
},
printButton: {
text: '打印',
onclick: function () {
this.print();
}
}
},
filename: '华颖智能',
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name +' '+ this.y+'mm' +'</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M', this.x) ;
}
},
credits:{
enabled:false //版权信息显示
},
legend: {
align: 'center', //水平位置
verticalAlign: 'bottom', //垂直位置
borderWidth: 0,
},
// series: [
// { name: "shebei1",
// type: "spline",
// data:[[1470009600000,11],[1470441600000,12],[1470960000000,4]]
// },
// { name: "shebei1",
// type: "spline",
// data:[[1470009600000,9],[1470441600000,10],[1470960000000,6]]
// },
// ]
series: [{
data: cj,
name: 'Right',
yAxis:0,
}, {
data: qx,
yAxis:1,
name: 'Center'
}]
},function(c) {
var labelText = [];
$('#historyBottom-left2').find('[type=checkbox]').each(function () {
if ($(this).is(':checked')) {
labelText.push($(this).next().text())
c.yAxis[0].setTitle({
text: labelText[0]
});
c.yAxis[1].setTitle({
text: labelText[1]
});
}
})
})
}
});
},
clickchart: function () {
//点击查询渲染图表,ajax请求
var labelText = [];
$.ajax({
type: "GET",
//url: "/forms-history/qushifenxi",
url: 'shujuguanlian.json',
dataType: 'json',
data:$('#connection-form').serialize(),
async: true,
success: function (result) {
$('#connectionBtn').click(function(){
var cj;
var wy;
var qx;
var data1;
var data2;
var aaa = [];
//console.log(result.cj);
//$('#historyBottom-left2').find('[type=checkbox]').each(function () {
function setdata () {
if ($('#historyBottom-left2').find('.input1').is(':checked')) {
cj = result.cj;
aaa.push(cj);
console.log(result.cj);
}
if ($('#historyBottom-left2').find('.input2').is(':checked')) {
wy = result.wy;
aaa.push(wy);
}
if ($('#historyBottom-left2').find('.input3').is(':checked')) {
qx = result.qx;
aaa.push(qx);
}
return aaa;
}
data1 = setdata()[0];
aaa = [];
data2 = setdata()[1];
var chart = $('#container_connect').highcharts({
chart:{
ignoreHiddenSeries: false, //点击legend消除所有数据，但是x、y依然存在
zoomType: 'xy',
resetZoomButton: {
position: {
x: -110,
// y: 10
},
relativeTo: 'chart',
theme: {
fill: '#4A90E2',
stroke: 'silver',
r: 5,
height:16,
style: {
color: 'white',
fontSize:16,
cursor:'pointer',
},
states: {
hover: {
fill: '#4A90E2',
style: {
color: 'white',
}
}
}
}
},
marginLeft:60,
marginTop: 50
},
title: {
text: null,
// x: -20 //center
},
exporting:{
enabled:false
},
xAxis: {
type: 'datetime',
labels: {
step: 1,
formatter: function () {
return Highcharts.dateFormat('%m/%d %H:%M', this.value);
}
}
},
//X轴分类
yAxis: [{
title: {
text: 'y1',
style: {
fontSize: 16
}
}
// max:15 //Y轴最大值
},{
title:{
text :'y2',
style: {
fontSize: 16
}
},
opposite:true
}
],
plotOptions:{
series:{
dataLabels:{
enabled:true,
align:'right'
}
}
},
navigation: { //配置按钮文字
buttonOptions: {
theme: {
// Good old text links
style: {
color: '#039',
textDecoration: 'none',
cursor:'pointer',
fontSize:16,
fontWeight:'bold'
}
},
verticalAlign: 'right',
// y: -30
},
},
exporting: {
buttons: {
contextButton: {
enabled: false
},
exportButton: {
text: '下载',
menuItems: Highcharts.getOptions().exporting.buttons.contextButton.menuItems.splice(2)
},
printButton: {
text: '打印',
onclick: function () {
this.print();
}
}
},
filename: '华颖智能',
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name +' '+ this.y+'mm' +'</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M', this.x) ;
}
},
credits:{
enabled:false //版权信息显示
},
legend: {
align: 'center', //水平位置
verticalAlign: 'bottom', //垂直位置
borderWidth: 0,
},
// series: [
// { name: "shebei1",
// type: "spline",
// data:[[1470009600000,11],[1470441600000,12],[1470960000000,4]]
// },
// { name: "shebei1",
// type: "spline",
// data:[[1470009600000,9],[1470441600000,10],[1470960000000,6]]
// },
// ]
series: [{
data: data1,
name: 'Right',
yAxis:0,
}, {
data: data2,
yAxis:1,
name: 'Center'
}]
}, function (c) {
var labelText = [];
$('#historyBottom-left2').find('[type=checkbox]').each(function () {
if ($(this).is(':checked')) {
labelText.push($(this).next().text());
c.yAxis[0].setTitle({
text: labelText[0]
});
c.yAxis[1].setTitle({
text: labelText[1]
});
}
})
})
})
}
});
}
};
app.init();
// app.chartLangReset();
})
这是所有代码
在点击查询按钮前，还可以正常显示，点击后就无法显示了。
点击前：![图片描述][1]
点击后：![图片描述][2]
[1]: /img/bVGAmQ
[2]: /img/bVGAmW
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）