javascript - 显示/隐藏 Highchart 内容

Question

我有一个下拉框，2 个日期选择器框，指示从和到日期，以及一个通过 AJAX 发布值的按钮，其结果显示在图表中。输入框并单击按钮后，图表应显示在相应的 div 上。单击其中一个日期选择器时，应该隐藏 div。当我第一次这样做时，这种行为似乎很正常。但是当我再次这样做时，图表没有出现并且显示了这个错误:

未捕获的类型错误:O[1].indexOf 不是函数

这是 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" />

Answer 1

好的，我解决了这个问题，我将这部分粘贴到这一行之前，这对我有用

 $("#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
                         ]
                     };
                 });