0
我有一个下拉框，2个日期选择框，从&指示日期和通过AJAX的POST值的按钮，其结果显示在图中。当输入框并点击按钮时，图表应显示在各自的div上。点击其中一个日期选择器时，应该隐藏div。当我第一次这样做时，这种行为看起来很正常。但是，当我再次这样做，图表不会出现，显示此错误：显示/隐藏高位图内容
Uncaught TypeError: O[1].indexOf is not a function
，这是的jsfiddle它也不会得到第二次
http://jsfiddle.net/t13jymwk/87/
此图是代码：
<script type="text/javascript">
var strarr = "[{name:'sfdsdfLi', y:9}, {name:'Kiwsdfi', y:3}, {name:'Mixesdfdnuts', y:1} ,{name:'Oranges', y:6}, {name:'Grapes', y:1}]";
$(function() {
$("#search_data").on('click', function() {
$.ajax({
type: "POST",
url: "WebForm1.aspx/GetVo",
data: JSON.stringify(obj),
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function (result) {
var myData = result.d;
console.log(result.d);
alert(result.d)
if (myData !== null && Object.keys(myData).length !== 0) {
strarr = result.d;
var myarr = eval(strarr);
$("#container").show();
}
else {
$("#container").hide();
return;
}
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
return {
radialGradient: {
cx: 0.5,
cy: 0.3,
r: 0.7
},
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
]
};
});
$('#container').highcharts({
chart: {
events: {
load: function (event) {
var total = 0;
for (var i = 0, len = this.series[0].yData.length; i < len; i++) {
total += this.series[0].yData[i];
}
var text = this.renderer.text(
'Total: ' + total,
this.plotLeft,
this.plotTop - 20
).attr({
zIndex: 5
}).add()
}
},
plotBackgroundColor: null,
plotBorderWidth: 1,
plotShadow: false,
width: 500,
height: 300,
type: 'pie'
},
title: {
text: ' Region: ' + reg
},
subtitle: {
text: '<br> From Date:' + obj.fromdate + '<br> To Date:' + obj.todate
},
tooltip: {
pointFormat: '<b>{point.name}</b>: {point.y}'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.y}',
},
showInLegend: true
}
},
series: [{
name: 'Delivered amount',
data: myarr
}]
}); },
error: function (error) {
alert('no data');
}
});
<script type="text/javascript">
$(function() {
var currentYear = (new Date).getFullYear();
var currentMonth = (new Date).getMonth();
var currentDay = (new Date).getDate();
$('#fromdate').datepicker({
showSecond: false,
timeFormat: 'HH:mm',
minDate: new Date((currentYear - 2), 12, 1),
dateFormat: 'yy-mm-dd',
maxDate: new Date(currentYear, currentMonth, currentDay),
onSelect: function (selectedDate) {
var startDate = $(this).datepicker('getDate');
$('#todate').datepicker('option', 'minDate', startDate);
$('#todate').datepicker('setDate', startDate);
var enddate = $(this).datepicker('getDate');
enddate.setDate(enddate.getDate() + 60);
$('#todate').datetimepicker('option', 'maxDate', enddate);
}
});
$('#todate').datepicker({
showSecond: false,
timeFormat: 'HH:mm',
minDate: new Date((currentYear - 2), 12, 1),
minDate: 0,
dateFormat: 'yy-mm-dd',
maxDate: '+30',
});
$('#fromdate').on('click', function() {
$('#container').hide();
$('#todate').on('click', function() {
$('#container').hide();
});
});
</script>
HTML：
<div id="container" class="container1">
</div>
<asp:DropDownList ID="regiondrop" runat="server" AutoPostBack="True"
onselectedindexchanged="regiondrop_SelectedIndexChanged">
</asp:DropDownList>
<span>
<asp:Label ID="Label1" runat="server" Text="From Date"></asp:Label>
<input ID="fromdate" value="dd/mm/yyyy" runat="server" clientidmode="static" />
</span>
<span>
<asp:Label ID="Label2" runat="server" Text="To Date"></asp:Label>
<input ID="todate" value="dd/mm/yyyy" runat="server" clientidmode="static" />
</span>
<input type="button" id="search_data" class="sear_btn" value="Search Data" />
无法重现。那么，jsfiddle显示了它应该如何正确工作？如果是这样，这看起来很奇怪，因为用日期选择器更改jsfiddle中的日期并不会改变图表。感谢您的进一步信息。 – nilsole
我只贴上html日期选择器。这些日期不能按照图表工作。但在我的代码图显示根据日期 –
您的代码似乎不能重现给我。例如。你指的是DOM节点，例如#seach_data，这是我在代码中找不到的。另外，你在那里有一个我无法复制的Ajax请求。 – nilsole