Ajax의 Highcharts 원형 차트

Question

하이 차트 원형 차트를 사용하는 페이지가 있는데 날짜 선택기 드롭 다운으로 차트를 업데이트하려고합니다. 나는 막대 차트와 그 위대한 작업을위한 비슷한 구현을했습니다. 주의하십시오 (이것은 PHP 클래스에서 나오므로 연결과 결합하지 않습니다).

<script type='text/javascript'> 

        function drawPie(data) 
        { 
         var chart; 
         alert('called'); 
         var options = { 
          chart: { 
           renderTo: 'PieChart', 
           plotBackgroundColor: null, 
           plotBorderWidth: null, 
           plotShadow: false, 
           height: 350 
          }, 
          title: { 
           text: 'Product Popularity' 
          }, 
          tooltip: { 
           pointFormat: '{series.name}: <b>{point.percentage}%</b>', 
           percentageDecimals: 1 
          }, 
          plotOptions: { 
           pie: { 
            allowPointSelect: true, 
            cursor: 'pointer', 
            dataLabels: {enabled: false}, 
            showInLegend: true 
           } 
          }, 
          series: [{ 
           type: 'pie', 
           name: 'Product Popularity', 
           data: data 

          }] 
         } 
         chart = new Highcharts.Chart(options); 
         $('#ProductPieMod div.mod_content').css('height', $('#PieChart').css('height')); 
        } 
       $(document).ready(function(){ 
        drawPie(" . $this->get_data($this->date) . "); 

        $('#ProductPieMod_date').on('change', function(){ 
         var val = parseInt($(this).val()); 
         switch(val) 
         { 
          case 0: 
           var date = Date.today(); 
           break; 
          case 1: 
           var date = Date.parse('last week'); 
           break; 
          case 2: 
           var date = Date.today().moveToFirstDayOfMonth(); 
           break; 
          case 3: 
           var date = Date.parse('January').moveToFirstDayOfMonth(); 
           break; 
          default: 
           var date = Date.today(); 
         } 
         var info; 
         $.ajax({ 
          type: 'POST', 
          url: '". matry::base_to('utilities/dhs/manager_dash') . "', 
          async: false, 
          dataType: 'json', 
          data: {date: date.toString('M/dd/yyyy'), module: 'ProductPieMod'}, 
          success: function(data) 
          { 
           drawPie(data); 
          } 
         }); 

        }); 
       }); 
       </script> 

내 아약스는 다음과 같은 문자열을 반환 :

[['FASTCLIX LANCING DEVICE', 62.5],['FREESTYLE LANCING DEVICE', 25],['ONETOUCH DELICA LANCING DEVICE', 12.5]]

또한,이 차트는 초기에 동일한 방법, 잘을 사용하여 만들어집니다. 그것은 방금 중단 드롭 다운 (onChange 이벤트를 실행)을 사용할 때.

업데이트 은 나뿐만 아니라이의 바이올린을 만들었습니다 http://jsfiddle.net/SHReZ/1/는

Answer 1

Firts, 당신은 다음, 당신이 추첨하기 전에 차트를 파괴 할 필요가 chart VAR document.ready에 핸들러의 범위를 배치해야합니다. 또한

$(document).ready(function() { 
    var chart; 

    function drawPie(data) { 
     console.log('called'); 
     var options = { 
      chart: { 
       renderTo: 'PieChart', 
       plotBackgroundColor: null, 
       plotBorderWidth: null, 
       plotShadow: false, 
       height: 350 
      }, 
      title: { 
       text: 'Product Popularity' 
      }, 
      tooltip: { 
       pointFormat: '{series.name}: <b>{point.percentage}%</b>', 
       percentageDecimals: 1 
      }, 
      plotOptions: { 
       pie: { 
        allowPointSelect: true, 
        cursor: 'pointer', 
        dataLabels: { 
         enabled: false 
        }, 
        showInLegend: true 
       } 
      }, 
      series: [{ 
       type: 'pie', 
       name: 'Product Popularity', 
       data: data 
      }] 
     }; 
     if (chart !== undefined) chart.destroy(); 
     chart = new Highcharts.Chart(options); 
     $('#ProductPieMod div.mod_content').css('height', $('#PieChart').css('height')); 
    } 


    drawPie([ 
     ['ONETOUCH DELICA LANCING DEVICE', 27.78], 
     ['FREESTYLE LANCING DEVICE', 20.83], 
     ['Nova Max Ketone Test Strips Health and', 11.11], 
     ['ONETOUCH ULTRASOFT LANCING DEVICE 2PK', 11.11] 
    ]); 
    //get data from https://gist.github.com/zba/4712055 , delay 4 
    $.post('/gh/gist/response.html/4712055', { 
     delay: 4 
    }, function (data) { 
     drawPie(data); 
    }, 'json'); 

}); 

fiddle

here 차트를 파괴하지만 색상을 변경하지 데모 훨씬

당신의 바이올린이 아닌, 그것은 '그들이 돈 때문에 도움이되지 않습니다 바이올린