동적으로 시리즈로로드 HighCharts

Question

사용자가 선택한 프로젝트에 따라 여러 시리즈로 동적으로로드하려고합니다. 나는 Laravel 5.2, PHP 5.6 및 HighCharts를 사용하고있다. 사용자가 프로젝트를 선택할 때 생성되는 하나의 JSON 파일로로드 할 수있었습니다. 하지만 자바 스크립트가 JSON 파일과 다른 시리즈를 구문 분석하고이를 시리즈에 동적으로로드 할 수 있다면 좋겠다.

$(function() { 
    // Set up the chart 
    var processed_json = new Array(); 
    $.getJSON('/uploads/test.json', function(data) { 
     for (i = 0; i < data.length; i++) { 
      processed_json.push([data[i].key, data[i].value]); 
     } 
     var chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'container', 
       type: 'column', 
       options3d: { 
        enabled: true, 
        alpha: 0, 
        beta: 0, 
        depth: 0, 
        viewDistance: 25 
       } 
      }, 
      title: { 
       text: 'Grades' 
      }, 
      subtitle: { 
       text: 'Dataset' 
      }, 
      plotOptions: { 
       column: { 
        depth: 0 
       } 
      }, 
      series: [{ 
       name: 'Grades', 
       data: processed_json 
      }], 

      credits: { 
       enabled: false 
      } 
     }); 

     function showValues() { 
      $('#alpha-value').html(chart.options.chart.options3d.alpha); 
      $('#beta-value').html(chart.options.chart.options3d.beta); 
      $('#depth-value').html(chart.options.chart.options3d.depth); 
     } 

     // Activate the sliders 
     $('#sliders input').on('input change', function() { 
      chart.options.chart.options3d[this.id] = this.value; 
      showValues(); 
      chart.redraw(false); 
     }); 

     showValues(); 
    }); 
    }); 

내 JSON이 같은 포맷 :

[{"key":"Math","value":6},{"key":"Biology","value":"8"},{"key":"English","value":"7"},{"key":"Gym","value":"4"}] 

그래서 내가 그렇게 같은 더 JSONs을하고 싶은 자바 스크립트 구문 분석하는 하나 개의 파일에, 이것은 내가 사용하고있는 코드는 시리즈에로드 될 수 있습니다.

감사합니다.

수정 답장을 보내 주셔서 감사합니다. 나는 내 코드 편집 한 :

$(function() { 

var processed_json = new Array(); 
     var options = {  
       chart: { 
        renderTo: 'container', 
        type: 'column', 
        options3d: { 
         enabled: true, 
         alpha: 0, 
         beta: 0, 
         depth: 0, 
         viewDistance: 25 
        } 
       }, 
       title: { 
        text: 'Grades' 
       }, 
       subtitle: { 
        text: 'Dataset' 
       }, 
       plotOptions: { 
        column: { 
         depth: 0 
        } 
       }, 
       series: [{ 

       }], 

       credits: { 
        enabled: false 
       } 
      }; 

     $.getJSON('/uploads/test.json', function(data) { 
      for (i = 0; i < data.length; i++) { 
       processed_json.push([data[i].key, data[i].value]); 
      } 
     }); 
      options.series[0].remove(); 
      options.series[0].setData = { 
       name: 'Grades', 
       data: processed_json 
      } 


     var chart = new Highcharts.Chart(options); 
     chart.redraw(true); 
     function showValues() { 
      $('#alpha-value').html(chart.options.chart.options3d.alpha); 
      $('#beta-value').html(chart.options.chart.options3d.beta); 
      $('#depth-value').html(chart.options.chart.options3d.depth); 
     } 

     // Activate the sliders 
     $('#sliders input').on('input change', function() { 
      chart.options.chart.options3d[this.id] = this.value; 
      showValues(); 
      chart.redraw(false); 
     }); 

     showValues(); 

}); 

을하지만 아무것도 더 이상 표시되지 않습니다 다음과 같은 오류가 나는 또한

var chart = new Highcharts.Chart(options); 
      chart.series[0].remove(); 
      chart.series[0].setData = { 
       name: 'Grades', 
       data: processed_json 
      } 
     chart.redraw(true); 

을 시도

TypeError: options.series[0].remove is not a function 

주어집니다하지만이 제공 :

TypeError: Cannot set property 'setData' of undefined 

Answer 1

같은 객체가 될 데이터를로드하는 방법을 정의 할 수 있습니다 그래프 highchart 및 모든 동적로드 및 작동 :) Highcharts는 대단합니다.

Answer 2

하이 차트에 새로운 시리즈를 추가하는 방법이 chart.addSeries으로 생각됩니다. 현재 시리즈를 새 시리즈로 바꾸려면 chart.series[0].remove()을 사용하여 현재 시리즈를 제거한 다음 chart.addSeries이라는 새 시리즈를 추가하십시오. 내 웹 애플리케이션에서 http://api.highcharts.com/highcharts/Chart.addSeries/Chart.addSeries , 난 10 15의 유형을 사용

function(chart) { 
    $.each(chart.series, function(i, v){ 
     chart.series[i].remove(true); 
    }); 
    chart.addSeries({your_data}, true); 
} 

확인하십시오 chart.addSeries에 대한 매개 변수는 예 .. 그런 다음
{ name: 'Grades', data: processed_json }