我有一个下拉框，2个日期选择框表示来自＆amp;通过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" />
答案 0 :(得分：0)
好吧，我解决了这个问题，我将此部分粘贴到此行之前，这对我来说是
$("#search_data").on('click', function () {
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
]
};
});
答案 1 :(得分：0)
您可以使用Highcharts附带的chart.update()功能。
http://api.highcharts.com/highmaps/Chart.update
我的代码，try it in jsfiddle:
var chart, chartObj, strArray = [
['sfdsdfLi', 9],
['Kiwsdfi', 3],
['Mixesdfd nuts', 1],
['Oranges', 6],
['Grapes (bunch)', 1]
];
$(function() {
$('[ID*=search_data]').on('click', function() {
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
]
};
});
chartObj = {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares. January, 2015 to May, 2015'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
},
connectorColor: 'silver'
}
}
},
series: [{
name: 'Brands',
data: [{
name: 'Microsoft Internet Explorer',
y: 56.33
}, {
name: 'Chrome',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Firefox',
y: 10.38
}, {
name: 'Safari',
y: 4.77
}, {
name: 'Opera',
y: 0.91
}, {
name: 'Proprietary or Undetectable',
y: 0.2
}]
}]
};
if (typeof chart !== "undefined") {
console.log("updating!");
chart.update(chartObj);
} else {
console.log("creating!");
chart = Highcharts.chart('container', chartObj);
}
});
});
/*,
error: function (Result) {
alert("Error");
}
});
}*/