Показать/скрыть Содержимое Highchart

Question

У меня есть раскрывающийся список, 2 ящика даты, указав от & к датам и кнопкам к значениям POST через AJAX, результаты которых отображаются на графике. Когда введены ящики и нажимается кнопка, диаграмма должна отображаться на соответствующем 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" /> 

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 
         ] 
        }; 
       }); 

Answer 2

Вы можете использовать функцию chart.update(), которая поставляется с Highcharts.

http://api.highcharts.com/highmaps/Chart.update

• Определите новый вар для вашей карты, так что вы можете работать с ним позже.
• Сохраните новый экземпляр Highcharts в этой переменной.
• обновите экземпляр, когда захотите.

Мой код для этой цели, 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"); 
    } 
    }); 
}*/